Jump to content

7.1 / Product Page / Desktop / Center Image

By TheLiqueurist, in Customize with code

Go to solution Solved by SaranyaDesigns,

Recommended Posts

  • Replies 6
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

TheLiqueurist
TheLiqueurist

@SaranyaDesigns Your understanding is spot on. I will play around with %. Many thanks.  

Posted Images

  • Solution
SaranyaDesigns Level 5

SaranyaDesigns

Posted
  • Solution
Posted

@TheLiqueurist am I correct in understanding that you want some whitespace to the left of the product image? Then the image center and the information on the right? As if there were 3 columns but the first column is always empty?

If so, try adding this to your custom CSS: 

@media screen and (min-width: 768px) {
	.ProductItem-summary .ProductItem-gallery {
		width: 30%;
		margin-left: 30%;
	}
}

You may find that it makes the images too small, so you can play around with the percentages to get the ratio you want, but the total must equal 60%.

Link to comment
  • 9 months later...
tuanphan Level 18

tuanphan

Posted
Posted
21 hours ago, Grave said:

nice wwork everyone...

 

How can you do this but move the Description to the left blank part effectively having product pics in middle description left handside & add to cart right handside?

 

https://www.necrowebsite.com/shop/p/primitive-champion-hoodie-white

 

 

Move to this position?

image.thumb.png.d2f387736eb81392a43b356cf900c65a.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources