Solved

need help with media queries

Posted on 2016-09-15
4
49 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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html border input line 7 16
Designing forms 3 19
Add a loading gif while php runs server side 15 37
Understanding UserAgent String 2 18
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
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 …
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

830 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