Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Hampton Dunlap
.a{fill-rule:evenodd;}techdegree
Hampton Dunlap
Front End Web Development Techdegree Student 14,308 Points

Issue with overflow-x: scroll on mobile browser

Hi All,

I have a jQuery doc linked to my index.html that creates a horizontal scroll container for a series of images. Everything works great when I view on my desktop browser, but when I view on my phone and tablet, all of the images are 'squished' into the width of the container. It seems like the issue lies with the 'overflow-x: scroll' line of code not executing on mobile browser windows for some reason. I saw some suggestions elsewhere that this command does not work in mobile browsers if it is applied to HTML or body, but I have wrapped my container in another div container, so I don't think that is the issue for me. I have posted the code below; any help would be greatly appreciated. Thanks!

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HDDesign</title>
    <link rel="shortcut icon" type="image/png" href="img/favicon.png"/>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script type = 'text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/gradient.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>    
</head>
<body>
    <div class="container">
        <div class="col-1" id="top">
        </div>
        <div class="col-2 gradient">
            <h1>Hello</h1>
        </div>
        <div class="col-3">
            <div class="wrapper">
                <h3>My name is Hampton</h3>
                <p>I am a self-taught graphic designer, web designer, and artist. Having obtained my Bachelor of Science in Economics from the College of Charleston in Charleston, SC, I came to the realization that economic forecasting was not my passion. Nor was I particularly good at it. Rather than following the path my misguided liberal arts major laid out for me, I shifted focus to spending my days doing what I love: creating things for screens.</p>
            </div>
            <div class="wrapper">
                <h3>Paper to Pixels</h3>
                <p>In the days since my graduation, I have given myself a crash course in the particulars of web design, learning HTML, CSS, JavaScript, and jQuery along the way. I live and breathe Adobe Creative Suite, particularly Illustrator, Photoshop, and After Effects. What's more important, though, is that I live for creating things; if I am not fiddling on my laptop or tablet, I am sketching nonsense in my notebook.</p>
            </div>
        </div>
        <div class="col-4">
<!--            <div class="wrapper">
                <h3>Check It Out</h3>
                <p>Like what you see so far? Then check out my work on Behance, or follow me up on Twitter. At the moment, I am working as the lead Graphic Designer for the Los Angeles branch of The Workshop, a creative collective and marketing agency. I am always looking for new projects, so if you'd like to make magic together, feel free to hit me up.</p>
            </div> -->
            <script src="js/jquery.mousewheel.js"></script>
            <img src="img/bridge.jpg" alt="Photo of Bridge, Grand Canyon">
            <img src="img/america.gif" alt="American Values">
            <img src="img/gypsy.jpg" alt="Collage of GypSea Lemonade">
            <img src="img/hilarity_alt.gif" alt="Photo of Hilary Clinton">
            <img src="img/lab.jpg" alt="Photo of the Do Lab at Coachella">
            <img src="img/bernie.jpg" alt="Illustration of Bernie Sanders">
            <img src="img/leon-bridges.gif" alt="Illustration of Leon Bridges">
            <img src="img/gab.jpg" alt="Picture of GypSea Lemonade">
            <img src="img/chinati.jpg" alt="Photo of an Installation at the Chinati Foundation">
            <img src="img/angela.jpg" alt="Illustration of Angela Merkel">
        </div>
        <div class="col-5">
            <div class="wrapper">
                <h3>Lets Make Magic</h3>
                <p>Be sure to check out more of my work on my Behance <a href="https://www.behance.net/hddunlap" target="_blank">profile</a>. I am always looking for new projects, so if you want to make something pretty together, don't be afraid to reach out via <a href="mailto:hampton.dunlap@gmail.com">email</a>. I specialize in digital content creation (website assets, instagram collages, etc.), logo and brand identity development, custom website builds, and consultation for CMS services like WordPress and Squarespace.</p>
            </div>
        </div>
        <footer class="main-footer">
            <div class="svg-container">
                <a href="https://www.behance.net/hddunlap" target="_blank"><svg version="1.1" id="behance" class="social" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             width="430.123px" height="430.123px" viewBox="0 0 430.123 430.123" style="enable-background:new 0 0 430.123 430.123;"
                             xml:space="preserve"><g>
                        <path id="Behance" d="M388.432,119.12H280.659V92.35h107.782v26.77H388.432z M208.912,228.895
                        c6.954,10.771,10.429,23.849,10.429,39.203c0,15.878-3.918,30.122-11.889,42.704c-5.071,8.326-11.367,15.359-18.932,21.021
                        c-8.52,6.548-18.607,11.038-30.203,13.437c-11.633,2.403-24.224,3.617-37.787,3.617H0V81.247h129.25
                        c32.579,0.53,55.676,9.969,69.315,28.506c8.184,11.369,12.239,25.011,12.239,40.868c0,16.362-4.104,29.454-12.368,39.401
                        c-4.597,5.577-11.388,10.65-20.378,15.229C191.675,210.236,202.007,218.086,208.912,228.895z M61.722,186.76h56.632
                        c11.638,0,21.046-2.212,28.292-6.634c7.241-4.415,10.854-12.263,10.854-23.531c0-12.449-4.784-20.712-14.375-24.689
                        c-8.244-2.763-18.792-4.186-31.591-4.186H61.722V186.76z M162.953,264.275c0-13.902-5.682-23.513-17.023-28.67
                        c-6.342-2.931-15.29-4.429-26.763-4.536H61.722v71.322h56.556c11.619,0,20.612-1.521,27.102-4.694
                        C157.084,291.863,162.953,280.76,162.953,264.275z M428.419,220.736c1.302,8.756,1.891,21.46,1.652,38.065H290.493
                        c0.77,19.266,7.421,32.739,20.035,40.449c7.607,4.835,16.83,7.196,27.63,7.196c11.388,0,20.67-2.879,27.815-8.797
                        c3.893-3.137,7.327-7.565,10.296-13.152h51.16c-1.34,11.379-7.5,22.92-18.57,34.648c-17.151,18.641-41.205,27.988-72.097,27.988
                        c-25.52,0-48.011-7.883-67.533-23.592C249.772,307.777,240,282.211,240,246.746c0-33.257,8.773-58.712,26.378-76.43
                        c17.67-17.751,40.474-26.586,68.583-26.586c16.661,0,31.68,2.978,45.079,8.965c13.357,5.993,24.396,15.425,33.09,28.388
                        C420.998,192.499,426.058,205.699,428.419,220.736z M378.062,225.73c-0.938-13.322-5.386-23.405-13.395-30.296
                        c-7.943-6.91-17.866-10.379-29.706-10.379c-12.886,0-22.836,3.708-29.906,10.996c-7.118,7.273-11.547,17.161-13.362,29.68H378.062
                        L378.062,225.73z"/></g></svg></a>
                        <a href="https://twitter.com/_hddunlap/" target="_blank"><svg id="twitter" class="social" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve"><g><g>
                        <path d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411
                        c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513
                        c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101
                        c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104
                        c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194
                        c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485
                        c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z"/></g></g></svg></a>
                        <a href="mailto:hampton.dunlap@gmail.com"><svg id="mail" class="social" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                        width="612px" height="612px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve"><g><g><path  d="M306.768,346.814h0.131c4.615,0,9.176-1.339,12.866-3.777l1.001-0.643c0.218-0.142,0.446-0.271,0.675-0.424l11.658-9.645
                        l278.259-229.624c-0.576-0.795-1.557-1.339-2.602-1.339H3.233c-0.751,0-1.448,0.272-2.003,0.729l291.125,239.954
                        C296.024,345.083,301.259,346.814,306.768,346.814z M0,133.899v340.37l208.55-168.471L0,133.899z M403.668,306.941L612,474.356
                        V135.031L403.668,306.941z M337.431,361.585c-8.305,6.814-19.168,10.57-30.576,10.57c-11.451,0-22.304-3.734-30.587-10.516
                        l-47.765-39.394L0,506.806v0.587c0,1.753,1.502,3.244,3.276,3.244h605.491c1.741,0,3.232-1.491,3.232-3.255v-0.544L383.693,323.4
                        L337.431,361.585z"/></g></g></svg></a>
            </div>
            <a href="#top"><svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 500 499.8" style="enable-background:new 0 0 500 499.8;" xml:space="preserve"><g><g>
                <path d="M56.7,35.8C19.1,78.3,0,150.7,0,251.1c0,99,18.7,170.4,55.5,212.3c30.3,34.5,61.7,35.5,65.2,35.5h120.7V277.5h-47.8v166.1
            h-49V55.2h49v167.7h47.8V0H122.9C119.4,0,87.5,1,56.7,35.8z M47.8,251.1c0-102.2,21.6-150.4,39.7-172.7c3.1-3.9,6.3-7.1,9.3-9.8
            v363.1C75.6,413.3,47.8,367.2,47.8,251.1z"/>
            <path d="M443.3,36.8C412.5,2,380.6,1,377.1,1H258.5v222.9h47.8V56.2h49v388.4h-49V278.5h-47.8v221.3h120.7c3.5,0,34.9-1,65.2-35.5
            C481.3,422.4,500,351,500,252C500,151.7,480.9,79.2,443.3,36.8z M413.5,421.9c-3.5,4.4-7,7.9-10.3,10.7V69.5c3,2.7,6.2,5.9,9.3,9.8
            c18.1,22.4,39.7,70.5,39.7,172.7C452.2,352.5,431.2,399.9,413.5,421.9z"/></g></g></svg></a>
        </footer>
    </div>
</body>
</html>

$('.col-4').bind('mousewheel', function(e) { // on scroll
    var $div = $('.col-4');

    // set div scroll top offset to current + extra from this scroll
    $div.scrollLeft($div.scrollLeft() - e.originalEvent.wheelDelta);

     // prevent body scrolling
     return false;
});

* {
    box-sizing: border-box;
}



body {
    font-family: Futura, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    color: #fff;
}

h1 {
    font-weight: bolder;
    text-transform: uppercase;
    font-size: 6em;
    letter-spacing: 6px;
}

h3 {
    padding: 0 20px;
    margin-bottom: 0;
    font-size: 1.6em;
}

p {
    padding: 0 20px;
}

svg {
    fill: #fff;
    width: 50px;
    height: 50px;
    margin: 20px;
    transition: 1s;
}

a {
    text-decoration: none;
    color: rgb(255,0,255);
    transition: 1s;
}

a:hover {
    color: rgb(19,255,241);
}

#behance:hover {
    fill: rgb(62,35,255);
}
#twitter:hover {
    fill: rgb(55,255,158);
}
#mail:hover {
    fill: rgb(255,35,98);
}
#logo:hover {
    fill: rgb(45,175,230);
    transform: rotate(360deg);
}

footer {
    width: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    background-color: black;
    text-align: justify;
    line-height: 1.4em;

}


.col-1 {
    background-color: white;
    background: url('../img/hd-loop.gif') no-repeat center;
    background-size: cover;
    color: black;
    height: 95vh;
}

.col-2 {
    background-color: red;
    height: 500px;  
}

.col-3,
.col-4 {
    min-height: 300px;
}

.col-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    min-height: 200px;
    background-color: white;
    color: black;
}

.col-1, 
.col-2,
.col-3 {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.col-4 {
    display: flex;
    height: 300px;
    width: 100%;
    flex-direction: row;
    background-color: white;
    overflow-x: scroll;
    overflow: hidden;
}

.col-4 a {
    height: 100%;
}

.col-4 img {
    height: 100%;
    width: auto;
}

@media (max-width: 760px) {
    .col-4 {
        display: none;
    }
}

@media (min-width: 480px) {

    .col-3 h3 {
        text-align: center;
        line-height: 1.4em;
    }
    .col-5 h3 {
        text-align: center;
    }
}

@media (min-width: 760px) {

    footer {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 40px;
        max-width: 1000px;
    }

    .col-3 {
        flex-direction: row;
        padding: 40px;
        max-width: 1000px;
    }
    .col-4 .wrapper {
        padding: 40px;
        max-width: 1000px;
    }
    .col-5 .wrapper {
        padding: 40px;
        max-width: 1000px;
    }


}