Jump to content

Preventing Images from Stacking Mobile

Recommended Posts

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.image.png.d45b7fbe7cbaa7d25bb03cada35bb7c9.png

Thanks!

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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}}

 

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

Link to comment

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!

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.