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.