Re: Variant Options are Displaying Incorrectly (Empire 8.1.0)

Solved

Variant Options are Displaying Incorrectly (Empire 8.1.0)

BentonsBacon
Excursionist
26 0 2

Hey all! We just updated our theme to a new version (Empire 8.1.0). Everything's ok with it, variants are displaying oddly now. On wider screens, instead of displaying variants in rows of 5, it just crams them all onto the same row and looks bad. I've also attached a video showing that it has to do with screen size. The key is definitely somewhere in the theme.css.liquid file, but I don't know where exactly.

 

The theme builder says it's because of some custom work we did, but it worked on our old theme, we upgraded, and now it's displaying oddly, so I don't know what I possibly could have done.

 

Thanks for any info!

 

How it looks now - bad:

 

bad.jpg

 

Here's how it used to look, and how I'd like it to look again:

good.jpg

Accepted Solution (1)
PageFly-Richard
Shopify Partner
4750 1081 1746

This is an accepted solution.

Hi @BentonsBacon ,

 

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

@media screen and (min-width: 1381px) {
    .template-product .product-details .options-selection__radios:last-child .options-selection__option-values {
         flex-wrap: wrap;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 6 (6)

Amlibolikha
Shopify Partner
69 9 13

Hi @BentonsBacon ,

 

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

BentonsBacon
Excursionist
26 0 2

Hi @Amlibolikha, thanks for the reply. Here's the shop and a PDP where you can see the wonky variant display: https://www.conquestmaps.com/products/decorative-wood-frame-for-push-pin-maps-all-frames

Amlibolikha
Shopify Partner
69 9 13

Hi @BentonsBacon ,

 

Sorry, I don't see the error on your store

Amlibolikha_0-1676477381272.png

 

BentonsBacon
Excursionist
26 0 2

Hi @Amlibolikha, hmm, weird. What's your screen size? It seems to happen anywhere above 1381px wide. My resolution is 1920x1080 and it currently looks like this:

 

BentonsBacon_0-1676478136078.png

 

PageFly-Richard
Shopify Partner
4750 1081 1746

This is an accepted solution.

Hi @BentonsBacon ,

 

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

@media screen and (min-width: 1381px) {
    .template-product .product-details .options-selection__radios:last-child .options-selection__option-values {
         flex-wrap: wrap;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

BentonsBacon
Excursionist
26 0 2

Hey @PageFly-Richard, that did the trick - thank you!