Skeleton Boilerplate - preventing movement of certain elements

Question

I am using skeleton to make a fluid layout, and it is working well mostly, but I have an issue here with this 2 column layout on magento : http://watchgearonline.co.uk/watch-straps.html

The nav on the left sidebar is set to 3 columns, and the main part on the right is set to 12 columns.

When you reduce the width of the page, the right hand side jumps underneath, and the left hand suddenly becomes very wide to compensate, and it doest look very nice.

I tried to stop it by using CSS max-width: 160px; applied to the left sidebar - and its better but still not very nice. I would prefer if the right hand column did not jump down and just stayed put.

How can I force the right hand column to stay where it is, but still have its size and contents remain fluid? or would it be better to just take skeleton out of this area and have it as static content?

James · Accepted Answer · 2014-03-25T11:48:35.890

To get the fluid layout I suggest you use width in % for smaller screens. All the width for the elements are given in pixels in media queries. For ex:

@media only screen and (max-width: 767px) and (min-width: 480px){
    .container {
        width: 420px;
     }
}

This is the styling for the div class container in skeleton.css. So when you resize the window and the width goes below 767px the width of the main container changes to 420px.The left-sidebar and the product listing div(right section or main part) also has width specified in pixels and the right section jumps below because there is no space for these two blocks to align side by side.

@media only screen and (max-width: 767px) and (min-width: 480px){
        .container {
            width: 90%;
         }
        .container .sidebar.three.columns{
            max-width: 20%;
         }
         .container .twelve.columns{
             width:75%;
             padding-right:0;
         }
    }

Try the above css and see how the divs move fluid when you resize the window. This is just an example code to show the blocks move fluid when you use % width. Similarly use % width for different screens in the media queries.

Hope this helps you some way.

thanks, i added it to my css, and it looks nicer! i hadnt heard of these media queries before, so thanks for letting me know. its a little bit beyond my understanding, but its working better anyways ! - edit i added that maxwidth of 160px to the sidebar, and i added max-width 160px to the products-grid.item as well, its much better now ! thank you — user3333427, Mar 25 '14 at 12:06
If you are planing to make your website responsive then read about media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. This will help you style your pages for different screens — James, Mar 25 '14 at 12:13

Skeleton Boilerplate - preventing movement of certain elements

1 Answers1