CSS Media Queries

I’ve updated three of my web sites (pyplate.com, raspberrywebserver.com and banoffeepiserver.com) to make them mobile friendly. I’ve been reading about responsive web design, and it’s pretty simple.

I added media queries to my CSS code. Media queries are a way of grouping CSS rules for different screen sizes. The widths of several divs need to reduced for smaller screens. For screen widths below 800px, the sidebar needs to be displayed below the main content. This is done by making the sidebar float to the same side as the main content.

I added the following code to the end of my CSS file:

@media (max-width: 800px) 
{    
    #banner
    {
        height:150px;
        padding-left:15px;
    }

    #bannerleft
    {
         text-indent:1px;
    }
    #bannerright
    {
         padding-top:10px;
         text-align:left;
         float:left;
    }
    #post_header
    {
        height:50px;
    }
    #midpage
    {
        width:100%;
    }
    #container
    {
        width:100%;
    }
    #sidebararea
    {
        width:100%;
        float:none;
        margin-left:0px;
        margin-top:0;
    }
}
/*@media (max-width: 800px) {
    #sidebararea
    {
        width:100%;
        float:none;
        margin-left:0px;
        margin-top:0;
    }
}*/
.bannerad { width: 320px; height: 50px; }
@media (min-width:500px) {
  .bannerad { width: 500px; height: 60px; }
  .main .navbar { min-width: 100%; }
}
@media (min-width:800px) { 
  .navbar { min-width: 1100px; }
  #banner { min-width: 1100px; }
  .main .navbar { min-width: 100%; }
  .bannerad { width: 778px; height: 90px; } 
}
@media (min-width:1000px) {
  .navbar { min-width: 1100px; }
  .main .navbar { min-width: 100%; }
  #banner { min-width: 1100px; }
}

Now when I reduce the width of my browser, the layout changes to suit mobile screens. If you open raspberrywebserver.com in a browser and reduce the width of the browser window, you should see the layout change. You may need to refresh the page after you change the browser width.

Advertisements

One response to “CSS Media Queries

  1. Pingback: Responsive Web Design | webrpi

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s