Jump to content

Center Product Options dropdown

Recommended Posts

Site URL: https://www.gossamercashmere.com/shop/gift-card

I've centered the product details, but for some reason the variant options are still left-justified and it looks pretty awful on this particular product page. Maybe I'm just missing something obvious in site styles? Anyone have a bit of code or advice to help me center that? Thanks! (Also, bonus points if anyone has code to left-justify only the excerpt on a specific product while leaving everything else centered?) Thanks so much community!

Edited by Defne
Link to comment
50 minutes ago, Defne said:

I've centered the product details, but for some reason the variant options are still left-justified

Personally, I do not recommend centering the product description. It would be better left-aligned. 

A centered description will affect readability and therefore overall accessibility and user experience (UX). Without a straight left edge, finding the next line of text is more difficult, making users work harder to read the text. This can be a particular issue for those with dyslexia.

 

644805272_Screenshot2021-11-01at15_19_26.thumb.png.f80efe9314ae569eac0b6d2f72feb4e3.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
59 minutes ago, paul2009 said:

Personally, I do not recommend centering the product description. It would be better left-aligned. 

A centered description will affect readability and therefore overall accessibility and user experience (UX). Without a straight left edge, finding the next line of text is more difficult, making users work harder to read the text. This can be a particular issue for those with dyslexia.

 

644805272_Screenshot2021-11-01at15_19_26.thumb.png.f80efe9314ae569eac0b6d2f72feb4e3.png

I absolutely agree! I want to revert all to left-justified but my client asked for a pared down more minimalist version of the page for mobile view only, so there's very little text there and I want to center it only on that page. Everything else would be left-justified. (What you're seeing now is temporary as I fine-tune the settings to work for both pages). Here's the page I'm working on so you can see why I want it centered:

 

https://www.gossamercashmere.com/women/cashmere-wrap

 

Maybe just a bit of code so I can center those first lines of the excerpt?

Edited by Defne
Clarifying
Link to comment

I guess what I'm really asking is how to center product details, so I can leave the text left justified but have the colors, add to cart, quantity etc all be centered, in mobile view. Sorry for the jumbled up question, I'm only just getting my head around the simplest solution but I think that would be it. Found some previous code here on the forum in other threads but it didn't work on my site. Thanks again for any help!

Link to comment
1 hour ago, Defne said:

I guess what I'm really asking is how to center product details, so I can leave the text left justified but have the colors, add to cart, quantity etc all be centered, in mobile view.

Sounds like a great idea. 

You can center elements on mobile by wrapping them inside a media query. For example, to center the variant selector and the Add to Cart button on mobile, you could use something like this:

@media only screen and (max-width: 640px) {
  .ProductItem-details .variant-option {
    margin: 14px auto;
  }
  .ProductItem-details .variant-option-title {
    text-align: left;
  }
  .ProductItem-details .sqs-add-to-cart-button {
    text-align: center;
  }
} 

615251376_Screenshot2021-11-01at18_50_49.thumb.png.8d8253b54cf99438a639fdeece691cc0.png

  If this post helps, please click a 'Like' or 'Thanks' icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

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.