Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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.

* {
padding: 0;
margin: 0;
}

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