Brooklyn - Issue with variant title font size and border

Store Design
1

Hi All, I have some issue with the variant on brooklyn theme,

  1. I would like to change the variant font size (“Size” and "Color) Only

  2. There is some weird hover border with round corner appearing when i click on an option from the variant, I want to remove it and make it the same as the border below.

Picture1.png
Picture1.png684×153 66.8 KB

  1. I want to change the link background color to black instead of blue. Besides the dropdown border appears to be dark grey i also want to change it to black instead matching the main border color.

Picture3.png
Picture3.png661×150 71.4 KB

Please help me thank you so much!

2

Hello @vanessaliew

Can you share your store link?

3

@vanessaliew

Please share your store URL.

4

Hi please see pm

5

@vanessaliew

I checked your product page but form me the layout look like bit different. Please see below:

options-layout.jpg
options-layout.jpg1135×424 73.7 KB

6

Hi @dmwwebartisan ,

I am using an app call variant swatch king for the variant hence it had become like that, but now here’s an issue after i used the app, i don’t know where to edit the code even after i copied the code from inspect to my theme.css it is still not working, what I want to do is like below:

  1. I want to change the variant title font size and weight (not bold)

  2. The dropdown hover border issue still occurs and the font size for “SMALL” is bigger on mobile which i dont want

  3. I want the dropdown border to be the same length as the “add to cart” button below

  4. I want to remove the " - Brown Corduroy" words beside COLOR

  5. I want the title to remain the same even before selecting any color because it will say “Select a Color”

  6. When i click the dropdown button the link color is blue i want it to be black

Your help means a lot, Thanks.

1

2.PNG
2.PNG1317×329 316 KB

3.PNG
3.PNG1328×347 315 KB

7

@vanessaliew

Please add the following code at the bottom of your assets/timber.scss.liquid file.

.swatch-label {
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: lowercase !important;
}

@media only screen and (min-color-index: 0) and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px){
.swatch-drop-down {font-size: 11px !important;}
}

Thanks!

8

Hi @dmwwebartisan thank you