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
Pieter Bracke
4,078 PointsApproach on layout of the html document towards the css document when using media queries
Hi,
Imagine you have an html document, and in this document I wish to add my code for creating a responsive website that will work on mobile, tablet and desktop.
How to I go about the layout of my html doc, do I create several content divs (one each for a different breakpoint) exp: <div class="content"></div> ,<div class="tabletcontent"></div>, <div class="mobilecontent"></div> and then use the display: none rule in my css to hide the different amounts of content that will be used when I am viewing on mobile, tablet or desktop.... What is the general way of working with this?
I am asking this question because I have mobile dropdown menu on my mobile version of a site but when I get to a tablet or desktop site I don't wish to display this dropdown menu anymore obviously. That said I find it not very logical to have to write all my code 3 times over in a different div...
Help on this topic would be much appreciated :)
5 Answers
Chris Howell
Python Web Development Techdegree Graduate 49,702 PointsI have an idea of what you are trying to do, but that does sound like excess work to go in and add CSS in for every extra DIV just for those 3 DIVs (Mobile, Tablet, Desktop). It actually makes it even harder to add in more screen sizes later because everytime you want to add in CSS for a new screen size. You have to add in more DIV tags with new class attributes, because displays on phones, tablets, desktops can vary so much in size these days. You never know what your site could potentially end up displaying on.
Writing well named class attributes for your HTML elements like a DIV tag is important because then you can just go through your CSS and write each different media query for the different sizes and what widths you want displayed or remove elements completely because maybe they dont look great on mobile or take up too much room.
Most CSS frameworks like Twitter Bootstrap start building the base site out for mobile first, then slowly adapt higher resolutions they want to support for the bigger screens inside the other media queries to progressively make the containing items wider and appear better for the screen size its being displayed on. This makes it easy to make changes to one media query and have all the affected selectors and classes within that media query affected.
I learned how to do a lot of this through the CSS courses right here on TeamTreehouse. The material is definitely covered. Especially from when I took the course years ago.
As far as this part.
This kind of matter is not covered in the course at all it just says what a media querie is and what it does but it does not give you any advice on how to layout your written code itselfs
If you have a specific layout question (example) someone here maybe even the instructors can help you get it sorted. But as far as the material covered, every built website can be situational. They cant really tell you what is best for YOUR particular site, whats good on a site Im building may not be great on a site you are building. So they have to keep it somewhat generic or they supply you with a sample project to work on with them. Which is just for learning how to adapt your code to how you need it. :)
Dalton Dunn
6,709 PointsWell you can add this tag in your head section
<meta name="viewport" content="width=device-width">
then after that in your CSS page that you have linked into your html you can have seperate rules for whatver max-width pixel range you want. Example here
@media (max-width: 1024px) {
background {
color: green
}
}
@media (max-width: 768px) {
background {
color: red
}
So these would set anything thats 1024px wide with a body color of green and anything 768px or less with a body color of red. It's just an example you can change everything within these media queries.
Pieter Bracke
4,078 PointsThx , for you answer not really what I am looking for though, btw it should be: <meta name="viewport" content="width=device-width, initial-scale=1">
Pieter Bracke
4,078 PointsI am fully aware of how media queries work :), you misread my question... I am asking what the approuch is on the layout of the html file -> how do you divide up what will be shown in your different media queries, I don't wish to have to use display: none on all my elements that I don't necessarily want to show on my different devices, therefore up untill now I have always made 3 content divs in my html one for each breakpoint width and in these containers I then put the code for each different breakpoint. However this makes me rewrite my code alot of times 2, and it seems a bad practice to me so I wonder what the general way of doing this is...
Dalton Dunn
6,709 PointsDefinitely give Chris's track a watch then to go more into depth on that. Media queries are there so you can avoid doing what you described.
Pieter Bracke
4,078 PointsI have watched the entire track already it does not contain the anwser I am looking for I am asking what the general layout of the HTML page should be for instance do I make one container for each device example: I make 3 divs one with class="mobile-content", another with class="tablet-content" and another with class="desktop-content". I then proceed to make 3 different stylesheets (which I link via media query in my html header) one for each device. Now I am able to simply put .desktop-content, tablet-content{display: none} inside of my mobile-content stylesheet and the elements which are inside of my .desktop-content, tablet-content will not display, Then inside of each stylesheet I can add my media queries specifically for each device inside my seperate stylesheets, this methods works really well the only problem I have is that I sometimes need to put my could 2 or 3 times in each content div (mobile-content, tablet-content, desktop-content). So I was wondering if this is a good approuch towards working responsive or not.... This kind of matter is not covered in the course at all it just says what a media querie is and what it does but it does not give you any advice on how to layout your written code itselfs.... I hope this time my question is understood....
Pieter Bracke
4,078 PointsThx for your anwser I will try to use the pointers you gave and look some more into the courses, I was hopikt there was a standard way of doing these kind of things but apparently it depends on what exactly you are building :)
Chris Howell
Python Web Development Techdegree Graduate 49,702 PointsWhat helped me even more was both reading simplified example Responsive html/css. I just google'd for examples or even tutorials to help grasp the idea more for other coders situations. Usually when they give "what they want" and then walk you through how they got there. Its helpful to see multiple scenarios so you can see what pieces yours fits in.
There is a standard way of getting things setup, but then the rest kind of depends on the direction you are going with items.