[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

need help with media queries

Posted on 2016-09-15
4
Medium Priority
?
68 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 2000 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
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)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

834 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