Tag Archives: media queries

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