Jump to content

Image block of specific section to align to edge of screen

Recommended Posts

Posted (edited)

Site URL: https://squid-strawberry-dwl2.squarespace.com/product-overview-1

Hi Tuan! you seem to be the almighty wiz so I hope my question goes through.

I have a similar issue, but need a specific image of specific content block to align fully to the right edge of the screen. 

I tried copy your code from the previous response but it didn't work. I have the 'Squarespace Collection/Block Identifier' extension and tried copying the # ID but think i'm lost.

The site is in trial mode meant to launch on Friday:
https://squid-strawberry-dwl2.squarespace.com/product-overview-1
password: october

Any ideas?

Thankful for help

 

 

Screenshot 2021-10-20 at 21.48.53.png

Edited by Cams
Posted
section[data-section-id="61706cb56765230a8ca03d86"] {
.page-section > .content-wrapper {
max-width: 100%;
padding-right: 0 !important;
}
}

Without doing any other optimizations the quickest solution to get your image on the right of the screen is to just override the section default padding and max-width. You'll then need to use spacers or custom CSS to adjust the layout and sizing's if you want.

If I remember correctly, you should be able to apply a spacer to the left of the section and between the text to bring it in a bit more like the original layout.  IMO - this is the easiest way of doing something like this, otherwise you'll likely be doing all of the positioning yourself.

  • 1 year later...
Posted (edited)

I feel like this is close to what I need but it's not working. I know this answer is 2 years old so maybe I need some different code for 7.1 Squarespace site?

The image stretches to the edge on desktop, but on mobile it follows the 5mm padding for some reason.

Anybody got any ideas to override the padding, or any other work arounds to get the image to go all the way to the screen edge on mobile?

Any ideas much appreciated! (Also sorry can't share site as client is super private)
It's just a normal image block on a freestyle page section.

Also thank you @tuanphan for the chrome extension recommendation! 
It's so much easier using this! 😄
https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff/related?hl=en
 

Image to edge.jpg

Edited by Jasperica
Posted (edited)

I got it to stay to the edge in mobile view!! 😄

SOLUTION:

It was just Squarespace's strange behavior in editor.
Before when I went into mobile to drag the image to the edge it wouldn't do it and showed the "NO" circle with line through symbol.
But... if you drag the image the opposite way making it smaller, then while still holding the mouse down try to drag it to the edge it will let you!
Kinda stupid but there is the solution for anyone stuck like me.


image.png.643d195d9bfd950775c1650ab5edb08f.png

Edited by Jasperica

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.