How to customize listing block

Nice to meet you.
I would like to know how to customize it.

Specifically, the listing block is very easy to see in the display slider, but on a smartphone it is too large to see the next listing service, so I have tried many times to make it smaller using CSS, but it doesn’t work.

Ideally, I would like to hide one listing as small as Netflix on a smartphone screen, and have three or four listings on the screen that can be scrolled horizontally to see more.

I have tried multiple CSSs, but they all fail to work.

Just for reference.

@media only screen and (max-width: 767px) {
.hp-listings {
display: flex; /* set container as flexbox /
overflow-x: auto; /
enable horizontal scrolling /
padding-left: 8px; /
set padding on the left side /
background-color: #fff; /
set background color to white */

.hp-listings .hp-grid__item {
flex: 0 0 calc(33.333% - 8px); /* display as 1/3 of screen width minus margin / }
margin-right: 8px; /
margin between items */

.hp-listings .hp-grid__item:last-child {
margin-right: 0; /* set right margin of last item to 0 */ }

Please let me know the exact CSS to be displayed.

Thank you in advance.


Sorry for the inconvenience, but customization is beyond our support scope - it includes fixing bugs and guidance about the available features Support Policy | HivePress

If customizations are required for your site, please try customizing it using the collection of code snippets Search · user:hivepress · GitHub and other developer resources, or consider hiring someone for custom work

got it. thank you.

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