Solved

need help with media queries

Posted on 2016-09-15
4
41 Views
Last Modified: 2016-09-15
http://www.goodlowsodiumfoods.com/responsive/

I have this code below, and what I'd like is the width of that container to be 90% on desktop, but 100% on everything else. Basically I want the body background color to peep out on either side of the white, but only on desktop view.

/* For desktop: */

@media only screen and (min-width: 768px){
.container-wide {
    width: 90%;
      background-color:#fff;
      margin-left:auto;
      margin-right:auto;
}
}


/* For mobile phones: */
@media only screen and (max-width: 500px) {
.container-wide {
    width: 100%;
      background-color:#fff;
}
}

/* For tablets: */

@media only screen and (min-width: 600px){
.container-wide {
    width: 100%;
      background-color:#fff;
}
}
0
Comment
Question by:mel200
  • 3
4 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41800572
In the order you have your media queries listed, the tablet view would out rank the desktop view since a width of 768+ would satisfy the min-width: 600px. Move your desktop media query to the bottom.
1
 

Author Closing Comment

by:mel200
ID: 41800700
Thanks, Kim. I couldn't find anything that explained that. I'll get some training in on this.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41800862
Do you understand it now? Do I need to elaborate?

Media queries are not exclusive. CSS rules are parsed and applied in the order received. When the media query conditions are not satisfied, that chunk of CSS is skipped. But if the conditions are satisfied, the chunk of CSS within that media query is applied. Then the CSS that follows is processed. If another media query is encountered whose conditions are also satisfied, that chunk of CSS is processed also. By placing your smaller screen media query after your larger screen media query, any rules and properties that conflict will override those for the larger screen.
1
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41800863
You could have also included a max-width condition in your tablet media query to avoid the overlap.
1

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question