Target ONE Variant Option title on product page

Site URL: https://cello-gerbil-ekze.squarespace.com/shop-D52uj-ksrCn/p/grounded-in-black-9g29f-546dy-377lg

Site page: https://cello-gerbil-ekze.squarespace.com/shop-D52uj-ksrCn/p/grounded-in-black-9g29f-546dy-377lg

Password 1234

Hey - I hope you can help. 

I am wanting the variants on my product page to be closer together. I was able to move the 'Frame Finish' variant dropdown but can't for the life of me find the correct CSS to move the title. See attached image. 

How can I target one variant title specifically and move it to be in line with the below dropdown?

Thanks

I should add that I tried adding 

#yui_3_17_2_1_1656125416681_569.variant-option-title {
  right: 90px !important;
}

but this did not work.

Thanks

I also just realised that moving the variant using the code 

#yui_3_17_2_1_1656125416681_539.variant-select-wrapper {
  right: 90px !important;
}

targets only the variant on that one page. Is there a simpler way to move that 'Frame Finish' variant on ALL product pages without needing to target each one specifically?

Thanks

Remove, make a copy somewhere, previous attempts at this effect.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .ProductItem-details .product-variants {
  
    display : flex;
    gap : 1rem;
    width : unset;
    
    }
	
  </style>

This is for v7.1.

Let us know how it goes.

6 hours ago, creedon said:

Remove, make a copy somewhere, previous attempts at this effect.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .ProductItem-details .product-variants {
  
    display : flex;
    gap : 1rem;
    width : unset;
    
    }
	
  </style>

This is for v7.1.

Let us know how it goes.

Thank you for this! This did have the desired effect of moving the variants side by side but how can I now move the 'Frame finish' variant to be closer to the first variant? 

Ideally, I would like something that applies this to all of the product pages so I wouldn't have to add new code for each page if that makes sense. Is there a way to move this variant and inject into header?

Thanks!

Quote

how can I now move the 'Frame finish' variant to be closer to the first variant?

As I mentioned you need to remove all previous attempts at this effect.

For example this rule-set is part of the issue.

.variant-select-wrapper {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  width: 70%
}

Quote

Ideally, I would like something that applies this to all of the product pages so I wouldn't have to add new code for each page if that makes sense. Is there a way to move this variant and inject into header?

If you install where I suggested it will effect all variants for the whole store page. If you have more than one store page you can remove the style tags and put the code in Design > Custom CSS.

22 hours ago, creedon said:

As I mentioned you need to remove all previous attempts at this effect.

For example this rule-set is part of the issue.

.variant-select-wrapper {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  width: 70%
}

 

If you install where I suggested it will effect all variants for the whole store page. If you have more than one store page you can remove the style tags and put the code in Design > Custom CSS.

This worked perfectly, thank you for your help!

On 6/26/2022 at 10:32 AM, creedon said:

As I mentioned you need to remove all previous attempts at this effect.

For example this rule-set is part of the issue.

.variant-select-wrapper {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  width: 70%
}

 

If you install where I suggested it will effect all variants for the whole store page. If you have more than one store page you can remove the style tags and put the code in Design > Custom CSS.

Me again!

So this worked perfectly on desktop but it looks a bit wonky on mobile - how can I either adjust the width so both fit on the same line on mobile or (which is more ideal) would be to have the frame finish variant below the size variant on mobile only?

I figured it out - just need to add the media query - thank you!