Jump to content

Product Page - Align Image to Right Side of Window (7.1)

Go to solution Solved by Ziggy,

Recommended Posts

Hello! I was wondering if anyone knew how I could clean up the product page I have to better match the example attached.

I've used an embedded code snippet to bring the accordion menu & bear arm image from "Additional Info" to underneath the "Product Description"

Is it possible to get the image to sit over along the right side border (versus indented)?

https://bearassbikinis.squarespace.com/explore/?pass=demo

Thank you!

Goal Layout.png

Edited by skalison
Link to comment
  • skalison changed the title to Product Page - Align Image to Right Side of Window (7.1)
  • Solution

You can try adding this Custom CSS, it will only work on that image on that product page:

#block-57d77508eb673195d826 {
      margin-right: calc(-4vw - 52px);
}

I would make sure that the image alignment is set to align right (I think you should be able to do this in the product additional info)

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
39 minutes ago, Ziggy said:

You can try adding this Custom CSS, it will only work on that image on that product page:

#block-57d77508eb673195d826 {
      margin-right: calc(-4vw - 52px);
}

I would make sure that the image alignment is set to align right (I think you should be able to do this in the product additional info)

@Ziggy THANK YOU!

Link to comment
2 minutes ago, skalison said:

@Ziggy THANK YOU!

No problem! Thanks for marking my post as the solution, if you get a chance to give a thumbs up as well that would be great, thanks!

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

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.