Solved

need help with media queries

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

Accepted Solution

by:
Kim Walker earned 500 total points
Comment Utility
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
Comment Utility
Thanks, Kim. I couldn't find anything that explained that. I'll get some training in on this.
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
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 21

Expert Comment

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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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…

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now