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 div
s 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.