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

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.

<div align=”center”>
<h2 class=”page-heading”>Featured Categories</h2>
<p style=”clear: both;”>
<a href=”/plain-grillz/”><img src=”https://cdn2.bigcommerce.com/n-pktq5q/hkb12/product_images/uploaded_images/grills-bannerfade.png” onmouseover=”this.src=’https://cdn2.bigcommerce.com/n-pktq5q/hkb12/product_images/uploaded_images/grills-banner.jpg'” onmouseout=”this.src=’https://cdn2.bigcommerce.com/n-pktq5q/hkb12/product_images/uploaded_images/grills-bannerfade.png'”style=”float: left; width: 42%; margin-left:8%; margin-right: 1%; margin-bottom: 0.5em;”></a>
<a href=”/earrings/”><img src=”https://cdn2.bigcommerce.com/n-pktq5q/hkb12/product_images/uploaded_images/banner2fade.png” onmouseover=”this.src=’https://cdn2.bigcommerce.com/n-pktq5q/hkb12/product_images/uploaded_images/banner2.jpg'” onmouseout=”this.src=’https://cdn2.bigcommerce.com/n-pktq5q/hkb12/product_images/uploaded_images/banner2fade.png'”style=”float: left; width: 42%; margin-right: 1%; margin-bottom: 0.5em;”></a>
<p style=”clear: both;”>
</div>

Here is the 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 post in this Q&A series, you will become more knowledgeable person to work on BigCommerce Stencil.

By / Published On: June 16th, 2017 /

Subscribe To Receive The Latest News

Curabitur ac leo nunc. Vestibulum et mauris vel ante finibus maximus.

Thank you for your message. It has been sent.
There was an error trying to send your message. Please try again later.

Add notice about your Privacy Policy here.