Jump to content

Need Equal Sized, Full-Bleed Image Blocks (Hover Overlay Effect Already Applied)

Recommended Posts

The third section on the page is a "portfolio preview" of sorts, but when responsive, the left and right images squish and the middle two do not. 

Is there a way to get these to all resize equally? They are images w/ a color block overlay and hover effect applied in custom css. 

https://endive-corn-larn.squarespace.com
pass: motifhomes

2104338947_ScreenShot2022-11-21at2_18_23PM.thumb.png.aa1b93b5a923daf7b96fee38ff966892.pngUploaded screenshot of section I'm referring to! 

Edited by katiemakesdesign
Link to comment
  • katiemakesdesign changed the title to Need Equal Sized, Full-Bleed Image Blocks (Hover Overlay Effect Already Applied)
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi @katiemakesdesign website looks really nice! Took me a minute to figure out that the problem is that the images are taking up a different number of grid columns, from left to right, 2, 9, 9, 4. The edge ones look wider on desktop because they are stretched to the edge across the margin, but this margin is very variable from potentially very wide on desktop to non-existent when the VW gets smaller than the content main width. That is why the edge two images shrink and grow. Now for the solution; my prefered way to deal with this is to make that particular section "full width" so the grid extends from edge to edge so that the grid is even and the images can take up 6, 6, 6, 6 columns. Add this to your Custom CSS:

section[data-section-id="6352ed6854d6e135b4acd83b"] {
  .fluid-engine {
    --sqs-site-max-width:100vw;
    --sqs-site-gutter:0vw;
  }
}

Let me know if you're happy with that solution!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
  • 2 weeks later...
On 11/22/2022 at 4:05 AM, Ziggy said:

Hi @katiemakesdesign website looks really nice! Took me a minute to figure out that the problem is that the images are taking up a different number of grid columns, from left to right, 2, 9, 9, 4. The edge ones look wider on desktop because they are stretched to the edge across the margin, but this margin is very variable from potentially very wide on desktop to non-existent when the VW gets smaller than the content main width. That is why the edge two images shrink and grow. Now for the solution; my prefered way to deal with this is to make that particular section "full width" so the grid extends from edge to edge so that the grid is even and the images can take up 6, 6, 6, 6 columns. Add this to your Custom CSS:

section[data-section-id="6352ed6854d6e135b4acd83b"] {
  .fluid-engine {
    --sqs-site-max-width:100vw;
    --sqs-site-gutter:0vw;
  }
}

Let me know if you're happy with that solution!

 

Hey @Ziggy !! Thanks so much for your response to this! I put that in the CSS and it's not seeming to work.. any suggestions?

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.