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 trialBen Taylor
902 PointsResponsive 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
3,055 PointsHi 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 :)
Andrew McCormick
17,730 Pointsadd overflow-x: hidden;
to the css of your body element
Ben Taylor
902 PointsHi 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
17,730 Pointshmm.. 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
iPhone5 6.0
iPhone5s 7.0
Jeremy Germenis
29,854 PointsMost 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!
- Open your console
- Remove a main section like the header
- if no change, remove another section
- if change, refresh the browser
- start removing child elements until your issue disappears
- 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
902 PointsHey 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
3,055 PointsHi 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
902 PointsHey 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
3,055 PointsWhat 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.
Ben Taylor
902 PointsBen Taylor
902 PointsHi 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 :)