Let's make our products grid look as it should. If you inspect the markup for our product items, you'll see that each has been given a class of col-sm-4:
<div class="product-item col-sm-4">While this constrains the width of each of our product items, it has failed to produce an effective grid.
The primary problem here is that our items have varying heights. Thus, when trying to float left, as Bootstrap grid components do, these items bump into one another. This results in a broken, uneven layout as shown in the following screenshot:
Currently, in a medium and large viewport, product items 4 to 7 refuse to float neatly due to their uneven heights.
Let's adjust the styles of our grid items to enhance their visual presentation. Having done that, we can fix this layout problem.
- As we'll be writing custom styles, have
_products-grid.lessopen in your editor. - Let's write styles to adjust image width, font size, padding, and margins as shown in the following lines of code:
.product-item { padding-bottom: 32px; img { width: 100%; } h2 { font-size: @font-size-large; line-height: 1.2; padding: 0 !important; margin-top: 6px; margin-bottom: 2px; } p { font-size: @font-size-small; line-height: 1.3; color: @gray; } } - These styles will accomplish the following:
- Add bottom padding to each product item
- Constrain the thumbnail image to the width of the product item
- Reduce the
h2heading font size to the size of our@font-size-large - Reduce the
pfont size to our@font-size-smallvalue - Reduce
h2padding by adding!importantto override any conflicting rules that we've written to apply in the standard pages - Set the
pfont color to@gray
Save these new styles, compile to CSS, and refresh your browser. Though the layout will still be broken in places, you should see significant improvement in the styling of the product items as shown in the following screenshot:
- Now, let's fix our layout problem. We'll do this simply by finding the maximum height that we need to manage the content of our test items. We are going to assume that we are working in a context where there are established guidelines for the images and text, so all product items will have standard thumbnail sizes and use no more text than the wordiest of the examples used here. If that is the case, then we can set a height value either in pixels or perhaps in more dynamic units, such as
emorex. For the purpose of this exercise, let's use the value of360px. While we're at it, let's hide content that overflows this value in order to avoid the potential problem of content messily overlapping the boundaries between items. Because these rules are focused on layout, I'll write them as a separate set of rules, albeit still in_products-grid.less, as follows:.product-item { height: 360px; overflow: hidden; }Save the file, compile to CSS, and refresh your browser. You should see our layout problems go away! The result is shown in the following screenshot:
- From this point, we can simply use responsive Bootstrap column classes in our markup to adjust as necessary across viewport widths. In this case, we want our grid to reduce to two products per row for small and extra-small screens, while medium and large viewports will have three items per row. To accomplish this, we need to find and replace the classes in each of our product items so that they are as follows:
<div class="product-item col-xs-6 col-md-4">
These classes will set each product item to half width within extra-small and small viewports, and then transition to one-third width .
Save the file and refresh your browser. You should now be able to drag to make your window width smaller or larger and watch the adjustment happen dynamically.
Product items will now be laid out in two columns on small and extra-small viewports.
Then, our grid will transition to a three-column layout in medium and large viewports.
It's a beautiful thing to behold.
Next, we'll style the filtering options sidebar.