How to Collapse 2 Columns of Featured Category Blocks on Desktop Screens to 1 Column on Mobile Screens

Updated on
How to Collapse 2 Columns of Featured Category Blocks on Desktop Screens to 1 Column on Mobile Screens

There is a widespread use of smartphones today. Therefore, proper rendering of ecommerce website content on mobile screens is crucial for success. The responsive design has improved the display of content on different devices.

With BigCommerce Stencil you can achieve 2 column layout content. If you are trying to have 2 columns on the desktop screens that change to a single column layout on mobile screens, the following CSS code will help you.

Featured Categories


Here is a handy way to turn 2 columns above each other on mobile screens. Here is the code.

@media screen and (max-width: 480px) {
.productGrid[data-product-type="featured"] + div > p:before,
.productGrid[data-product-type="featured"] + div > p:after{
    content:"";
    display:table;
    clear:both;
}
.productGrid[data-product-type="featured"] + div > p {
	margin: 0;
}
.productGrid[data-product-type="featured"] + div > p > a {
    display: block;
    margin-bottom: 20px;
}
.productGrid[data-product-type="featured"] + div > p > a > img {
    display: block;
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
}
}

We have started a series of Questions and Answers for BigCommerce Stencil that will primarily focus on resolving the most common problems faced by site owners and developers. By frequently visiting our blog and reading the posts in this Q&A series, you will become a more knowledgeable person to work on BigCommerce Stencil.

Updated on

Leave a comment

Please note, comments need to be approved before they are published.