Listing page / category and listings collumns amount

Hiya,

How can I change the amount of collumns on the listing page on mobile layout. I have received a snippet that works for desktop.

On this page I show categories Aanbod - Motoronderdelen Marktplaats – Onderdelen Kopen en Verkopen

And on this page I show listings Aanbod - Circuit-Motoren.nl - Vind jouw ideale circuitmotor

They are both showing a very large picture, Would be nice to see 2 next to eachother to save some space and preserve scrolling :slight_smile:

I tried some css like this

but the text now crosses the images :stuck_out_tongue:

@media only screen and (max-width: 768px) {
/\* Zorg voor 2 kolommen \*/
.hp-listing-categories .hp-grid__item,
.hp-categories .hp-grid__item {
flex-basis: 50% !important;
max-width: 50% !important;
}

/\* Titel en overlay teksten kleiner en strakker */
.hp-category–view-block .hp-category__name {
font-size: 0.85rem !important;
line-height: 1.1em !important;
white-space: normal !important; /* laat 2 regels toe \*/
text-overflow: unset !important;
}

.hp-category–view-block .hp-category__count {
font-size: 0.7rem !important;
line-height: 1.1em;
margin-bottom: 2px;
}

/\* Zorg dat teksten netjes binnen de kaart centreren */
.hp-category–view-block .hp-block__content {
padding: 6px 4px !important; /* minder padding \*/
text-align: center;
}

/\* Optioneel: maak afbeeldingen iets hoger voor betere verhouding \*/
.hp-category–view-block .hp-block__image {
min-height: 120px;
object-fit: cover;
}
}

This looks pretty nice!

 only screen and (max-width: 768px) {/* 2 kolommen */.hp-listing-categories .hp-grid__item,.hp-categories .hp-grid__item {flex-basis: 50% !important;max-width: 50% !important;}

/* Verberg count in header (overlay) */.hp-listing-category–view-block .hp-listing-category__item-count {display: none !important;}

/* Titel /.hp-listing-category–view-block .hp-category__name a {font-size: 0.8rem !important;   / kleiner dan 16px /line-height: 1.3em !important;text-align: center;display: block;margin-top: 2px;margin-bottom: 6px;white-space: normal !important;overflow-wrap: break-word;word-break: break-word;hyphens: auto;color: #111 !important;         / zwart i.p.v. wit */}

/* Afbeelding ruimte geven */.hp-category–view-block .hp-block__image {margin-bottom: 6px;}}
2 Likes

Hi,

Unfortunately, displaying two columns on mobile isn’t currently supported out of the box, but we plan to improve mobile layouts and UX in future updates. In the meantime, you’ll need to use custom CSS to achieve this.

If your shared code works well, thank you for contributing it! It will be helpful for other users who need this functionality.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.