Help With Centering Size Text, Variety Pills, And Quantity Text, With Dawn 11.0.0 Update (Mobile)

Store Design
, , ,
1

Hello,

I’m having issues properly centering the size, variety pills, and quantity text with the Dawn 11.0 Update on my website. The issue is, I fixed with some code earlier, which, on the shopify customize page, looks completely normal and centered, but when I check the website from mobile from a different device or on phone, it’s off center. The customize page is different than what is actually presented to people who visit my website. My website is clubevince.com, thanks. The code I used previously was successful in centering on desktop, but doesn’t work on mobile.

ClubEvince_0-1692660757558.jpeg
ClubEvince_0-1692660757558.jpeg1170×1712 97.4 KB

Above image is off centered size text, quantity text, and the variety pills.

This was the code that I used (worked correctly in 10.0 update but seems to be wrong for mobile right now in 11.0 update)

.form__label {
width: 100%;
text-align: center;
}

fieldset.js.product-form__input {
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.product-form__input.product-form__quantity {
max-width: 100%;
}

/* If you need to center the buttons too */
.product-form__buttons {
margin: auto;
}

If there is any fix or a completely new code please help. Thanks.

2

You can try to add this CSS code at the end of base.css file

variant-radios,
.product-form__input { text-align: center !important; }

Screenshot 2023-08-22 at 09.21.03.png
Screenshot 2023-08-22 at 09.21.03.png389×547 17.7 KB

3

Hi @ClubEvince ,

This is David at SalesHunterThemes.

Thank you for your question.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → section-main-product.css file.

Add this following code at the bottom of page.

.product .product-form__input {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.product .product-form__input .form__label,
.product .product-form__quantity .quantity__label {
  text-align: center;
}

Hope this can help.

David | SalesHunterThemes team

4

This one fixed it on the shopify website view (for both desktop and mobile), but when I open my store on my phone it still is off center. It’s as if the edit only fixed the shopify view. What might the problem be?

5

Hey @ClubEvince

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
6

This one fixed it, thanks!

7

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.