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

CSS

Ben Taylor
Ben Taylor
902 Points
Posted by Ben Taylor
Ben Taylor
902 Points

Responsive Problem

Hey guys,

I was wondering if anyone could tell me why (in iPhone size) my website has a horizontal scrollbar?

http://www.hecticdesigns.co.uk/clients/tot/

Many thanks,

Ben

4 Answers

Jordan Pyne
Jordan Pyne
3,055 Points

Hi Ben,

I have fixed your problem.

You need go to the style.css and paste this at the bottom.

The problem cannot be solved by using overflow without getting rid of the footer.

This is a different method and it works perfectly.

header .headerContainer {
    width: auto;
}

.footerLeft p {
    max-width: 380px;
}

.footerLeft {
    max-width: 380px;
}

Sorry for the drama.

Sincerely, Jordan :)

Ben Taylor
Ben Taylor
902 Points
Ben Taylor
Ben Taylor
902 Points

Hi jordan,

Sorry for the late reply.. I've just applied that code and it worked! Don't really understand HOW this fixed it, but it did haha.. thanks a lot :)

Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

add overflow-x: hidden; to the css of your body element

Ben Taylor
Ben Taylor
902 Points
Ben Taylor
Ben Taylor
902 Points

Hi Andrew,

Thanks for your reply. I've done this, but it hasn't fixed it.. any other ideas?

The scrollbar may have gone, but you can still scroll the side with a trackpad or on a phone..

Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

hmm.. seems to have fixed it on my end. I no longer see the horizontal bars on my desktop when I resize the window or on the iPhone simulators (i'm not cool enough to have an iPhone :( ) .
Maybe clear your cache?

Simulator Screenshots:

iPhone4s 5.1 iPhone4s 5.1

iPhone5 6.0 iPhone5 6.0

iPhone5s 7.0 iPhone5s 7.0

Jeremy Germenis
Jeremy Germenis
29,854 Points
Jeremy Germenis
Jeremy Germenis
29,854 Points

Most likely caused by padding/margin or a specified width on an element. Because you seem like someone who is probably awesome I will share my super secret "find an unknown error" method!

  1. Open your console
  2. Remove a main section like the header
  3. if no change, remove another section
  4. if change, refresh the browser
  5. start removing child elements until your issue disappears
  6. repeat until you find the element(s) responsible for your issue

Once you know what element is causing the effect you can inspect its css rules. Then, start the process of elimination again by deactivating the css rules one by one.

Overriding css is ok but it is much better to figure out the actual problem so you will not repeat it and will have a better understanding of the system of css.

Ben Taylor
Ben Taylor
902 Points
Ben Taylor
Ben Taylor
902 Points

Hey Jeremy,

Thanks for the advice :) I just tried this.. and even after pretty much removing everything, there was still the ability to scroll to the side :/

Jordan Pyne
Jordan Pyne
3,055 Points
Jordan Pyne
Jordan Pyne
3,055 Points

Hi Ben,

@media screen and (max-width : 908px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 60px;
    overflow-x: hidden;

}

}

@media screen and (max-width : 844px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 90px;
    overflow-x: hidden;
}

#navigation {
    display: none;
}

.navToggleDiv {
    width:40px;
    height:40px;
    position:absolute;
    top:60px;
    right:20px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4yLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIwIDAgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQwIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zNi44NDMsMEgzLjE1OEMxLjQxNSwwLDAsMS40MTUsMCwzLjE1OHYzMy42ODRDMCwzOC41ODYsMS40MTUsNDAsMy4xNTgsNDBoMzMuNjg1QzM4LjU4Niw0MCw0MCwzOC41ODYsNDAsMzYuODQyVjMuMTU4DQoJCUM0MCwxLjQxNSwzOC41ODYsMCwzNi44NDMsMHogTTM4LDM2Ljk0NUMzOCwzNy41MjcsMzcuNTI3LDM4LDM2Ljk0NiwzOEgzLjA1M0MyLjQ3MSwzOCwyLDM3LjUyNywyLDM2Ljk0NVYzLjA1Mw0KCQlDMiwyLjQ3MSwyLjQ3MSwyLDMuMDUzLDJoMzMuODk1QzM3LjUyNywyLDM4LDIuNDcxLDM4LDMuMDUzVjM2Ljk0NXoiLz4NCgk8cmVjdCB4PSIxMiIgeT0iMTEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIyIi8+DQoJPHJlY3QgeD0iMTIiIHk9IjE5IiB3aWR0aD0iMTYiIGhlaWdodD0iMS45OTgiLz4NCgk8cmVjdCB4PSIxMiIgeT0iMjgiIHdpZHRoPSIxNiIgaGVpZ2h0PSIyIi8+DQo8L2c+DQo8L3N2Zz4NCg==);
    background-size: 40px 40px;
    display:block;
    z-index: 999;
}

}

@media screen and (max-width : 779px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 110px;
    overflow-x: hidden;
}

.twitterBarContainer p {
    font-family: "caflisch-script-pro",sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1.8em;
    padding: 8px 0 0 0;
    margin: 0;
    overflow-x: hidden;
}

}

@media screen and (max-width : 742px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 130px;
    overflow-x: hidden;
}

}

@media screen and (max-width : 696px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 150px;
    overflow-x: hidden;
}

}

@media screen and (max-width : 660px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 170px;
    overflow-x: hidden;
}

}

@media screen and (max-width : 622px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 190px;
    overflow-x: hidden;
}

.twitterBarContainer p {
    font-family: "caflisch-script-pro",sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1.3em;
    padding: 12px 0 0 0;
    margin: 0;
    overflow-x: hidden;
}

}

@media screen and (max-width : 580px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 210px;
    overflow-x: hidden;
}

}

@media screen and (max-width : 540px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 230px;
    overflow-x: hidden;
}

}

@media screen and (max-width : 502px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 270px;
    overflow-x: hidden;
}

.twitterBarContainer p {
    font-family: "caflisch-script-pro",sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1.125em;
    padding: 15px 0 0 0;
    margin: 0;
    overflow-x: hidden;
}

.footerLeft {
    width:440px;
    position:absolute;
    top:8px;
    left:20px;
    color:#fff;
    font-family: "trajan-pro-3",sans-serif;
  font-weight: 400;
  font-size: 0.50em;
  overflow-x: hidden;
}

}

@media screen and (max-width : 460px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 270px;
    overflow-x: hidden;
}

.twitterBarContainer p {
    font-family: "caflisch-script-pro",sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 1.1em;
    padding: 15px 0 0 0;
    margin: 0;
    overflow-x: hidden;
}

}

@media screen and (max-width : 423px) {

#logo {
    width:136px;
    height: 165px;
    position: absolute;
    top: 0;
    left: 310px;
    overflow-x: hidden;
}

}


/* Smaller ----------- */
@media screen and (max-width : 699px) {

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    width:100%;
    overflow-x: hidden;
}
}
/*object.logo {
    max-width:70%;
    margin-top:36px;
}*/

@media screen and (max-width: 960px) {
    * {
        overflow-x: hidden;
    }
}

Sorry this is ugly.

Copy this into your style.css from line 588 down (it updates the current code, so delete everything from line 588 and put this instead).

This should fix all issues.

Sincerely,

Jordan :)

Ben Taylor
Ben Taylor
902 Points
Ben Taylor
Ben Taylor
902 Points

Hey Jordan,

Thanks for your answer.. I did this and it didn't work :/ it put loads of vertical scrollbars in on elements and made the footer disappear..

Jordan Pyne
Jordan Pyne
3,055 Points

What browser are you using?

I have tested on Google Chrome and it fixes the overflow issue.

It does get rid of the footer however.

Hmm.