Center the color palette on the product page in the Dawn theme for mobile view.

[Sivadarshan]

I want to center the color palette on the product page only in mobile view, and the quantity selector takes 2 seconds to align in the center on mobile. How can I correct both of these issues?

Website : https://rugd-in.myshopify.com/

Password: rugged

Thanks in advance.

[Huptech-Web · Accepted solution]

Hello! @Sivadarshan Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media only screen and (max-width: 767px){
 .product-form__input--swatch {
    justify-content: center;
    text-align: center;
    margin: 0 auto;
 }
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Best regards
K.K

[MHIZTINAS]

I an see you have a nice store  There are some files attach to it can i share some help

[MHIZTINAS]

For centering the color palette on mobile only, you’ll likely need a targeted CSS media query. As for the quantity selector delay, it may be a JavaScript or CSS loading issue causing it to align slowly. I can help you refine these adjustments—let’s connect to go over the specifics!

[MHIZTINAS]

For centering the color palette only in mobile view, you’ll need to add a CSS media query specifically for smaller screens. This will allow you to adjust the alignment of the color palette without affecting the desktop view.The 2-second delay could be due to a few different factors, such as JavaScript loading time or CSS animation. By refining your scripts or optimizing CSS, you can likely eliminate that delay. Sometimes, minor JavaScript tweaks can speed up the alignment process by triggering it sooner.