Code to make listing photo display in secondary block in mobile version, smaller screens

[marvinks.wellsltd]

Please help me with a snippet code to make the listing featured or vendor’s photo display in the mobile version or on smaller screens.

Just like in the other listing-hives theme where the photo is at the header of the listing but I would prefer it with a round frame and smaller size to match this theme

[ihor]

We can provide a CSS snippet to show these images but please note that this may require further customizations, initially images are hidden to save the horizontal space on small screens. Let me know if it’s ok.

[marvinks.wellsltd]

Yes, please. I would also like to maintain the horizontal block layout for smaller screens.

As long as it stays centered at the header part of the block and is not congested with attributes. then please go ahead.

The same round framed style for vendor image is fine or the square featured image for the listing like the other hivepresslisting theme.

I believe I can customize the size and position.

[marvinks.wellsltd]

Ill be waiting for the code

[andrii]

Hi,

Please try this CSS snippet but please note that it can require further customization

@media only screen and (max-width: 47.99em){
	.hp-listing--view-block .hp-listing__header {
        display: block !important;
    }
}

[marvinks.wellsltd]

Perfect boss