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.
