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 Responsive Layout

Posted by Sandi Gau
Sandi Gau
3,466 Points

I can't figure out how to change the footer for the tablet and laptop layout.

I got the media query for the 3 layouts/device view to work but I can't figure out how to change the footer for the tablet and laptop layout. In the Mockup, the footer content for the single column/mobile view is completely different than the tablet and laptop layout. The Tablet and laptop layout has a footer that is exactly the same as the header. How do I change the footer for the tablet and laptop display to match the mockup? Do I need to make the adjustment in the html or css, or both?

4 Answers

Oleksii Sodolinskyi
Oleksii Sodolinskyi
4,680 Points
Oleksii Sodolinskyi
Oleksii Sodolinskyi
4,680 Points

Hey Sandi Gau,

in index.html: add something like <a class="footer-link" href="#top">Back To Top</a>

in .CSS: in @media screen and (min-width: 20em)- footer navigation -> display: none; in @media screen and (min-width: 48em) and @media screen and (min-width: 64em) - footer- link "Back to top" -> visibility: hidden;

GL

Sandi Gau
Sandi Gau
3,466 Points

After consulting with my developer friends, it turns out that I have to write the content for the two different footers into the html and have one hidden in the css using visibility: hidden; or visibility: visible; to chose which footer to display depending on the device size. You're answer is essentially what I was looking for. Thank you.

Russell Sawyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points
Russell Sawyer
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points

You need to make the change in the media query in the CSS for that screen size. Use the dev tools to determine the height of the header and make the footer the same height. Adjust the margin and padding as needed. You can also copy the CSS for the Header into the Footer.

Sandi Gau
Sandi Gau
3,466 Points

No I get that, that's easy. The content is completely different in the mobile layout than the other two layouts. In the mobile layout, the footer has "student name" on the left and "back to the top" on the right. The tablet and laptop layout on the other hand, has "student name" on the left and the navigation list on the right. So it's not an issue of me adjusting the CSS as the content itself for the 2 footers are completely different. You would have a better understanding if you look at the mockups for the responsive project.

Jacob Mishkin
Jacob Mishkin
23,117 Points
Jacob Mishkin
Jacob Mishkin
23,117 Points

First you set the mobile styles, then at the required breakpoint you then add the media query and then style the page according to the mockup inside the media query, then move to the next breakpoint, if needed.