Shopify themes, liquid, logos, and UX
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:
Here's how it used to look, and how I'd like it to look again:
Solved! Go to the solution
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.
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.
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
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:
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.
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024