How can I center my variant dropdown selectors on sense theme?

Store Design
1

JonahGf_0-1671593621421.png
JonahGf_0-1671593621421.png561×479 22.9 KB

I can’t find a way to center the size and animal variant drop-downs. I was only able to center the quantity selector. Does anyone know what code I can add to center them?

2

Hi @JonahGf ,

You can do that by adding this code in Online store > Themes > Edit code > Assets > open base.css and add code at the bottom of this file, click Save button

variant-radios, variant-selects { text-align: center; }
3

Hello @JonahGf

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

4

@JonahGf Please send me store url.

5

@JonahGf
@Hello,
Can You Please Share Your Store URL?
I Will Check Your Issue and Provide a Proper Solution

6

Hello @JonahGf ,

To resolve this issue, you need to add the below-provided code in your base.css file.

.product-form__input .select{

width: 25rem !important;

margin-right: auto !important;

margin-left: auto !important;

}

variant-selects{

text-align: center !important;

}

This will resolve your issue. Let us know if you need further help.

Regards,

CedCommerce

7

Hi [email removed]JonahGf,

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file section-main-product.css.

Step 3: Paste the below code at bottom of the file → Save

.product-form__input .select,.product-form__input.product-form__quantity quantity-input{

margin-right: auto !important;

margin-left: auto !important;

}

variant-selects,.product-form__input.product-form__quantity{

text-align: center !important;

}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

8

Hello @JonahGf ,

Glad to support you today.

You can check out my suggestion below to get your concern resolved:

  1. Go to Edit code on Online Store:

GemPages_0-1671700573904.png
GemPages_0-1671700573904.png399×194 24.3 KB

  1. Add my code above the tag on file Theme.liquid:
.product-form__input .select,.product-form__input.product-form__quantity quantity-input{

   margin-right: auto !important;

   margin-left: auto !important;

}

variant-selects,.product-form__input.product-form__quantity{

   text-align: center !important;

}

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

9

can you share the same solution but for Dawn theme? TIA!