If you use Hostinger Website Builder to create an online store, you may have noticed that, by default, products are displayed in a single column in the mobile version of your site.
If you wish to change that, follow the steps below 👇
Copy the Code
The code below is meant to display products in two columns on mobile:
<style>
@media screen and (min-width: 301px) and (max-width: 920px) {
.block-product-list__content {
grid-template-columns: repeat(2, 1fr) !important;
gap: 5px !important;
min-width: 300px;
}
.product-list-item__price-wrapper *,
.product-list-item__title {
font-size: 14px !important;
}
.product-list-item__button{
padding: 5px !important;
}
.product-list-item__price-wrapper{
flex-direction: column;
}
.product-list-item__price-content{
justify-content: center;
}
}
@media screen and (max-width: 300px) {
.block-product-list__content {
grid-template-columns: repeat(2, 1fr) !important;
}
}
</style>
If you wish to display products in three columns on mobile, you should replace 2 with 3 in this particular line:
grid-template-columns: repeat(2, 1fr) !important;
NOTE
There are two such lines in the code – in the beginning, and at the end – you should edit the first line only; i.e., to display products in three columns on mobile, the code should look like this:
<style>
@media screen and (min-width: 301px) and (max-width: 920px) {
.block-product-list__content {
grid-template-columns: repeat(3, 1fr) !important;
gap: 5px !important;
min-width: 300px;
}
.product-list-item__price-wrapper *,
.product-list-item__title {
font-size: 14px !important;
}
.product-list-item__button{
padding: 5px !important;
}
.product-list-item__price-wrapper{
flex-direction: column;
}
.product-list-item__price-content{
justify-content: center;
}
}
@media screen and (max-width: 300px) {
.block-product-list__content {
grid-template-columns: repeat(2, 1fr) !important;
}
}
</style>
This means the following:
If the width of a mobile device screen is from 301 PX to 920 PX*, products are displayed in three columns
Just in case the width of a mobile device screen is 300 PX or less, products are displayed in two columns
* 920 PX is the breakpoint into the desktop version in sites created with Hostinger Website Builder
Aiming for the best customer experience, it's not recommended to display products in more than three columns on mobile 💡
Paste the Code
Go to your website's Settings → Integrations, and paste the code in the Custom code field. Then, save the changes and update your website.