Solved

column in accordion section | Broadcast Theme

JonX
Explorer
76 6 33

Hello,

I would like to increase the number of Column on 1 row to 7 image with text on desktop and 3 on mobile.

Accordion : HOW TO USE

It is ok if the pictures get a bit small as it is Icons.

My URL : https://www.ambigoose.com/products/powerhouse-moisturizer?variant=37129349791943

Thank you

Jon

Screen Shot 2021-07-29 at 12.05.34 PM.png

Accepted Solutions (2)

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @JonX 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

#shopify-section-product-accordion-1 .faq-list.faq-list--5{
	flex-flow: nowrap;
       justify-content: flex-start;
}

@media screen and (max-width: 728px){
#shopify-section-product-accordion-1 .faq-list {
   flex-wrap: wrap !important;
}
#shopify-section-product-accordion-1 .faq-list.faq-list--5 .faq-list__item{
	    flex: 0 0 33.33%;
}
}

 

 

 

 

View solution in original post

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

 

#shopify-section-product-accordion-1 .faq-list.faq-list--5{
       justify-content: center;
}

 

View solution in original post

Replies 6 (6)

Kinjaldavra
Shopify Partner
2302 570 1422

hello @JonX  do you want to look like this https://nimb.ws/UL4WwP

 

JonX
Explorer
76 6 33

@Kinjaldavra Yes exactly.... and 3 pic on mobile....

Thank you so much for your reply

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @JonX 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

#shopify-section-product-accordion-1 .faq-list.faq-list--5{
	flex-flow: nowrap;
       justify-content: flex-start;
}

@media screen and (max-width: 728px){
#shopify-section-product-accordion-1 .faq-list {
   flex-wrap: wrap !important;
}
#shopify-section-product-accordion-1 .faq-list.faq-list--5 .faq-list__item{
	    flex: 0 0 33.33%;
}
}

 

 

 

 

JonX
Explorer
76 6 33

That is amazing @Kinjaldavra .

It would great if we could center the text and center the bottom row on mobile

IMG_36D594F1501D-1.jpeg

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

 

#shopify-section-product-accordion-1 .faq-list.faq-list--5{
       justify-content: center;
}

 

JonX
Explorer
76 6 33

Thank you so much @Kinjaldavra