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

Posted by lorilane
lorilane
1,512 Points

Header and footer problems in mobile version

Hi again,

I discovered another problem earlier today with header and footer and decided to post this separately from the navigation issues. The header and footer came up short (on right side) on mobile via RWD views on Chrome, Firefox and my Iphone. I did some research on the Internet and tried several solutions. None of them worked for my mobile version.

One forum mentioned possibilities of padding adding to width 100% and CSS reset. I looked at both style and normalize (CSS reset) files and found nothing there. Then I looked into HTML coding to see how I set up the layout. I did not see anything wrong with it either. The header and footer are set outside of the grid system so that they show at full screen. I used the container div inside the header to contain both the site name and navigation, but I do not think this poses any problems.

To solve this problem temporarily as suggested by the forum online is to use:

body, html { overflow-x: hidden; }

It works great for the mobile version. None of the content is hindered. I know this may not be the best solution for the long run because the problem(s) are still lurking somewhere in CSS.

I wonder - could the viewport be the problem?

Please help me what I have been missing here. Your fresh eyes would be greatly appreciated! Thank you.

4 Answers

lorilane
lorilane
1,512 Points

Hey Justin,

I just discovered that the navigation is the culprit that causes header and footer to "shrink" via mobile view. I either remove the navigation or put in float: right on nav ul, the problem disappears. Now that has been solved for the header and footer.

I will focus on the navigation issues next and figure out how to design it in CSS.

Lo

Unsubscribed User
Unsubscribed User
8,167 Points
Unsubscribed User
Unsubscribed User
8,167 Points

Hope this helps. Before you style your nav/header, write one of the

.... * { padding: 0; margin: 0; }

I think that worked for me, because sometimes browsers have default values for padding & margin. Just make sure this selector doesn't change other padding and margins you've created so I'd put it first in your stylesheet.

Unsubscribed User
Unsubscribed User
8,167 Points
Unsubscribed User
Unsubscribed User
8,167 Points 
* {
padding: 0;
margin: 0;
}
lorilane
lorilane
1,512 Points
lorilane
lorilane
1,512 Points

Hi Justin,

Thanks for the suggestion and I appreciate it. The normalize file (CSS reset) already has it in place on the body. I tried your suggestion anyways and the result remains the same. :(

I'll continue to research on this issue why the header and footer come up short in the mobile version.

Thanks, Lo