What is wrong with this media query?

HTML & CSS
1

I have a 2 column layout where for the main section I use the table/table-cell properies:

#main {
  width: 100%;
  margin: 32px 0;
  display: table;
  z-index: 2;
  border-spacing: 1em;
  border-collapse:separate;
  z-index: 3
}
#main #sidebar,
#main #content  {
  padding: 32px;
  display: table-cell;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  background-color:rgba(0,0,0,0.9);
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  vertical-align: top;
  position: relative;
}

#main #sidebar {
  width: 30%;
}

On smartphones (portrait) this becomes unreadable so I want to have div#sidebar and div#content above eachother so I made this media query:

@media only screen and (max-device-width :400px) and (orientation : portrait) {
  #main,
  #sidebar,
  #content {
    width: 100%;
    display: block !important;  
  }
  
  #content {
    margin-top: 1.5em;  
  }      
}

But as you may understand is that not working. What is wrong with this approach?

Thank you in advance

2

just got this to work and iam pretty sure all i have done is added

 width: 100% !important;

To your media query

#main,
#sidebar,
Content {
width: 100% !important; /*just here you needed this to take over */
display: block !important;
}

Hope that does it for you

3

Why are you trying to target different device widths and orientations? Why not just make a usable site in every sort of screen size and that way you won’t have to mess with different orientations?

PS: You shouldn’t be using device-width for your queries.

4

Ids are unique so there is no need to try an make them double unique.

#main #sidebar,

There is only ever one #sidebar on the page so don’t make the browser go looking for irrelevant content.

‘#sidebar’ is fine. :smile:

If you do say something like ‘#main #sidebar {}’ then you must follow the same process in your media query so that you keep the same specificity and that would avoid the use of !important…

Remember simpler is better :smile:

As Ryan said don’t chase device widths or orientation but use screen width instead for more reliable results (assuming you have the correct viewport meta tag in place).

5

Hi Ryan and Paul.

Thank you both for the reply and very useful tips :smile:

@Ryan I have been rading your article with interest. Your arguments were compelling enough :slight_smile:

I have a short question though. For smartphones and tablets (portrait) I want the divs sidbar and content to be on top of eachother. For smartphones and tablets (landscape) I just need some ajustments in width, padding and font-size, etc Right now I have the folloing media qury to accomplish that:at least for smartphones (portrait)

@media only screen and (max-width: 480px) {
    
  body {
    font-size: 13px;  
  }
  
  #wrapper,
  #footer {
    width: 94%;    
  }
    
  #header {
    padding: 8px 0;    
  }
  
  #logo {
    width: 40%;
    margin: 8px 0;
    padding: 8px;
  }
  
  #navigatie {
    position: relative !important;
    z-index: 4 !important;  
  }
  
  #navigatie li {
      padding-left: 10px !important;
  }

  #navigatie li + li {
    padding-left: 10px !important;        
  }

  #navigatie li a {
    font-size: 1.1em !important;
  }
  
  
  #main{
    margin: 8px 0 32px;
    display: block !important;
  }
  
  #sidebar,
  #content {
    width: 100% !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 16px !important;
    float: left !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;  
  }
  
  #content {
    margin-top: 1.5em;
  }
  
  #content h1 {
    font-size: 120%;  
  }
  
  #sidebar h2 {
    font-size: 110%;
  }
  
  #sidebar h2.nieuws {
    margin-top: 2.5em !important;  
  }
 
  #sidebar .thumbnail {
    display: none;  
  } 

  .footer_links,
  .footer_rechts { 
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    float: none !important;
   } 
   
  .footer_rechts { 
    margin-top: .5em!important;
    margin-left: 0 !important;
  }
}

Is it somehow possible to adjust this media query in such a way that I target not just the smartphones (portrait) but tablets (portrait ) as well.

Thank you in advance

6

Chasing devices and orientation is largely irrelevant and futile (unless you are building a specific app for a device). What you need only be interested in for normal responsive sites is how the design fits across the screen. Forget mobile widths and tablet widths and orientation because the combination of all those across all devices runs into hundreds of different permutations and you will never satisfy all of them.

Simply make your design fit at every pixel on your desktop browsers as you open and close the screen. The point where you need to make the design go into one column will be obvious and will be dictated by the design and not the device and that point of change will be relevant to all devices as you are really only interested in the width of the display; no matter the device or orientation.

It would be illogical to have mobile and tablet reverting to single columns at the same time because some tablets are very large. Forget devices and concentrate on how your design looks at different widths and create breakpoints where your design needs it and not where you think a device may be watching :smile:

7

Glad you found it useful! I appreciate it.

If you want them on top of each other, and they are currently floated, why not just unfloat them? Their natural block behavior will force teh stack.

If my article was so convincing why are you still worrying about portrait view or an\ything like that? Don’t worry about it :slight_smile: .

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.