Skip to main content
All CollectionsWebsite BuilderOnline Store
Website Builder: The Number of Columns When Displaying Products on Mobile
Website Builder: The Number of Columns When Displaying Products on Mobile

Learn how to change the number of columns in which products are displayed on the mobile version of your website

Updated over a week ago

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) {
.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;
text-align: center !important;
}
.product-list-item__button-wrapper,
.product-list-item__price-content {
justify-content: center !important;
}
.product-list-item__button {
padding: 5px !important;
}
.product-list-item__price-wrapper {
text-align: center !important;
flex-direction: column;
}
}
@media screen and (max-width: 300px) {
.product-list__content {
grid-template-columns: repeat(1, 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) {
.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;
text-align: center !important;
}
.product-list-item__button-wrapper,
.product-list-item__price-content {
justify-content: center !important;
}
.product-list-item__button {
padding: 5px !important;
}
.product-list-item__price-wrapper {
text-align: center !important;
flex-direction: column;
}
}
@media screen and (max-width: 300px) {
.product-list__content {
grid-template-columns: repeat(1, 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 SettingsIntegrations, and paste the code in the Custom code field. Then, save the changes and update your website.

Did this answer your question?