We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Re: Sense Theme - Bean position

Solved

How can I align beans in two lines on the Sense Theme?

pawliciouz
Excursionist
19 0 7

Hello, how can I have the first 3 beans in a line and the next 3 ones (with 3x) in the line underneath?

pawliciouz_0-1656963050743.png

 

Website: www.pawliciouz.com

 

Accepted Solution (1)

suyash1
Shopify Partner
11112 1367 1751

This is an accepted solution.

@pawliciouz - please add this css to the end of your base.css file and check, should look like screenshot below

.product-form__input input[type='radio'] + label{width: 30.33%;}

 

suyash1_0-1656990659064.png

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com

View solution in original post

Replies 4 (4)

suyash1
Shopify Partner
11112 1367 1751

This is an accepted solution.

@pawliciouz - please add this css to the end of your base.css file and check, should look like screenshot below

.product-form__input input[type='radio'] + label{width: 30.33%;}

 

suyash1_0-1656990659064.png

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com
pawliciouz
Excursionist
19 0 7

Worked perfectly. Thank you

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

Hi @pawliciouz, you can try to add this code at the bottom of your section-main-product.css file to do it 

@media screen and (min-width: 768px) {
variant-radios { width: 79% !important; }
}

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

LitCommerce
Astronaut
2860 684 761

Hi @pawliciouz,

Go to Assets > base.css and paste this at the bottom of the file:

.product-form__input input[type='radio'] + label {
    width: 30% !important;
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!