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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Alanto Monteiro Jones
Alanto Monteiro Jones
10,816 Points
Posted by Alanto Monteiro Jones
Alanto Monteiro Jones
10,816 Points

Media Queries + Amount of Content

In the tutorials regarding Media Queries, Nick starts from a mobile version and adds queries to format the content for when the browser window is enlarged to desktop size. I can understand that if the amount of content that was to be displayed on a desktop browser was the same amount of content being displayed on the mobile site, media queries would be a great way to work from the mobile version upwards.

But, if there was a lot of content difference between the mobile and desktop view (ie., more detail and content on the desktop browser view) would all the 'extra' content need to be added within the media query, as in adding extra divs to the html file and calling the ids through the css when page is resized?

Would it not be simpler to code the desktop version first and then make changes when the browser is downsized?

Al

4 Answers

Brian Goldstein
Brian Goldstein
19,419 Points
Brian Goldstein
Brian Goldstein
19,419 Points

I respectfully disagree --- You can display: hidden; on content you don't need for mobile like sliders, etc, and then they appear at higher break points for one, and for two, your grasp of the content needs to be rock solid before you code anything - and remember --- the highest priority CSS rule wins. So if you write out the desktop version you're effectively doubling your workload and time on project having to rewrite the rule to work with a smaller media query.

Gareth Borcherds
Gareth Borcherds
9,372 Points
Gareth Borcherds
Gareth Borcherds
9,372 Points

I think the best way to handle this is kind of how the bootstrap framework does. They basically create different classes that allow you to make something visible or hidden with the use of different classes. So if you are going to hide one div on a small device, but keep it on a bigger one, you just put in a certain class and it'll hide the content for you.

Here's the documentation on how they do it http://getbootstrap.com/css/#responsive-utilities

As to the second question, I think the way you program is all preference. If you want to go from desktop to mobile, then you should do that.

Alanto Monteiro Jones
Alanto Monteiro Jones
10,816 Points
Alanto Monteiro Jones
Alanto Monteiro Jones
10,816 Points

Hey Brian, So it would be also possible to add an extra class to all the elements you just want hidden like sliders etc, (eg. '''.hideMob {display: hidden;} ''' ? In that way, the css you write in your main css would only need one rule, which could also be overiden by the media queries '''@media screen and (min-width: 660px) { .hideMob { display:block !important; } } ''' Am I right in thinking that? Thanks, Al!