Center Product Options dropdown

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!

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.

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.

 

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?

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!

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;
  }
} 

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