THE SIMPLE CSS TRICKS TO CREATE A RESPONSIVE MASONRY BOX

css wordpress 33

In the modern world everyone wants to sell their product through online, that time they are looking a web design and development company to develop their website. While developing an eCommerce website it’s challenging to a designer or developer how user friendly they can show their products so that it can attract more customers to their website.

How it will help

If you are developing a eCommerce website you always face the problem while adding their product images to website, because all images are not same width or height and it’s hard to make resize all images to fit in a product row. most of all designers are adding overflow:hidden; to cut the image size so that all will look fit to the product box but it’s not good idea to cut the original image. Some developers are doing using JQUERY but it’s complicated and requires high resource and the website may slow to load.

Here you can know how simple to create the responsive masonry box to display the products of your website.

Use of the code for responsive masonry box

Please take a look to the CSS codes bellow.
masonry.css
ul.pbox {
margin:0;
padding:0;
}
ul.pbox li {
display: inline-block;
background: #207ede;
padding: 1em;
margin: 0 0 13px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 2px 2px 4px 0 #ccc;
border:1px solid #ccc;
}
ul.pbox li p {
color:#ffffff;
font-family: “Gill Sans”, “Gill Sans MT”, “Myriad Pro”, “DejaVu Sans Condensed”, Helvetica, Arial, sans-serif;
}
ul.pbox {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
@media only screen and (min-width: 400px) {
ul.pbox {
-moz-column-count:2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 700px) {
ul.pbox {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 900px) {
ul.pbox {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

Our fiddle Example

Please see our fiddle example for Demo.Click Here

Now you learned how it creates the masonry box and asking question how it can be responsive and fit in all view port.

It’s very simple just add the column count values in the respective view port.

For example-in 320px mobile device it will show one box in a row so the column count value should be one. On 480px view port only two boxes will show in a row so the column count value should be two, same for the 768px the column count value will be three and so on. put the column count values as per the view port.

To know more interesting CSS codes check our next post. if you have any question then feel free to ask us.
Categories: Html, Javascript, Jquery Tags: animation, jquery, learn, placeholder, set content

Dreambrahim

Leave a Reply

Your email address will not be published. Required fields are marked *

All rights reserved to wordpress-st