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 trialHampton Dunlap
Front End Web Development Techdegree Student 14,308 PointsIssue 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;
}
}