Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

need help with media queries

Posted on 2016-09-15
4
Medium Priority
?
67 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

618 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