Preventing Images from Stacking Mobile

Site URL: https://collectivecanvas.com/testbedzzz

Hi team,

I'm usually fairly good at making adjustments like these with CSS but this is proving more difficult than I anticipated. I'm trying to prevent the four images at the bottom of this test page from stacking on mobile, however nothing I've tried seems to work.

Could someone more adept than me provide some CSS that will help me prevent this - I'd like them to stay in a row of four on mobile.

Thanks!

Try using a GALLERY block for this as it already shows 2 rows on mobile if that's what you're looking for and you can show the caption... that might do it without additional CSS

you can later add a CSS rule to show/hide the different variants on mobile/desktop

Example:
 

@media only screen and (min-width: 840px)
{#BLOCK ID{display: none !important}}

@media only screen and (max-width: 840px)
{ #BLOCK ID{display: none !important}}

Hi Armin,

Appreciate the response!

Unfortunately the gallery blocks aren't the best solution here - I need the images to display 4x1 at all page widths and for the images to display with transparent backgrounds.

There must be another way to target these specifically in the CSS? Nothing I've done seems to prevent them wrapping...

Thanks!

On 6/8/2022 at 4:13 AM, ora87 said:

Hi Armin,

Appreciate the response!

Unfortunately the gallery blocks aren't the best solution here - I need the images to display 4x1 at all page widths and for the images to display with transparent backgrounds.

There must be another way to target these specifically in the CSS? Nothing I've done seems to prevent them wrapping...

Thanks!

The page doesn't exist now. Can you check it again?