Broken Category Page Layout on Mobile Devices

[juann.cba]

Hello everybody!

I’m having trouble with the layout of a category page on mobile devices. The page isn’t displaying correctly and content is overflowing. Here’s the page with the issue:

• Problem Page: Cultura – lafalda.com

For reference, this page looks fine:

• Working Page: Cabañas – lafalda.com

I’ve tried adjusting the CSS without success. Can you help me figure out what’s going wrong or suggest a fix?

All of this i think happened after i try the follow css trying to change the image placeholder that it doesnt not work provided on the post Replace the placeholder image - #5 by Josh_W

.hp-listing–view-block .hp-listing__image{
background-image: url(‘image_url’);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.hp-listing–view-block .hp-listing__image img{
opacity: 0;
}

Thanks a lot for your help!

Best,

[ihor]

Sorry for the delay.

Please send more details about the issue, should I test a specific screen size? I checked and it seems to be ok, please also check if one of the listings causes this, maybe there’s a listing with an extra long custom attribute text or other embedded content. If another category page is ok then there’s something related to one of the listings, or the category details.

[juann.cba]

Hello Ihor! thank you so much for your help!

I found one of the things were breaking it was when i check the box “Enable gallery preview” on hivepress listing settings.

I fixe it adding the follow CSS

	/*Soluciona inconveniente de zoom y layout rotos*/
@media (max-width: 600px) {
    .content-area {
        width: 348px;
    }
}

Could you confirm this is ok, and is not going to affect other pages?

Thank you very much for your help!

Juan

[ihor]

Yes, thanks for sharing - it’s ok as a temporary fix, we’ll also test embedded listing galleries before releasing the next HivePress update.

[juann.cba]

Thanks Ihor!

Have a great one!