How to center product variants on mobile only in Prestige theme?

Store Design
1

Hey Guys,

How can I center the variants on the product page on mobile only? THey show up to the left. The theme is prestige and the site is ElevationAthleticsYYC.ca

Screen Shot 2022-05-28 at 12.10.35 PM.png
Screen Shot 2022-05-28 at 12.10.35 PM.png804×1078 89.1 KB

1 Like
2

@Claud123

sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.Product__Info, .ProductMeta {text-align: center;}
.ProductMeta__ShareButtons {justify-content: center;}
1 Like
3

Thanks for your help. It ended up centering everything on the desktop too. I want the desktop to stay unaffected and for it just to center the variant options on mobile as well as capitalize the word Size:

Screen Shot 2022-05-29 at 7.15.27 PM.png
Screen Shot 2022-05-29 at 7.15.27 PM.png3456×1804 537 KB

1 Like
4

@Claud123

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media screen and (max-width: 1007px) {
.Product__Info, .ProductMeta {text-align: center;}
.ProductMeta__ShareButtons {justify-content: center;}
.ProductForm__Label {text-transform: uppercase;font-weight: bold;}
}
1 Like