Variant Options are Displaying Incorrectly (Empire 8.1.0)

Store Design
1

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
bad.jpg1920×929 133 KB

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

good.jpg
good.jpg1683×811 104 KB

2

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.

3

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

4

Hi @BentonsBacon ,

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

Amlibolikha_0-1676477381272.png
Amlibolikha_0-1676477381272.png601×326 15.7 KB

5

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
BentonsBacon_0-1676478136078.png1537×664 160 KB

6

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

7

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

1 Like