2 product blocks on the same row on mobile

Site URL: https://octopus-pentagon-c2h7.squarespace.com/

Hi!

I really tried not to annoy anyone with my question as I'm sure some people faced the same issue but I can't find the right code for my problem.

On my home page, I've got a row of 4 product blocks that automatically change into 1 per row on mobile.

How can I change them in 2 per row?

Same thing with the text blocks in the footer.

Password:1234

Thanks in advance,

Yann 

On 3/15/2021 at 10:45 PM, NikosPhadji said:

Site URL: https://octopus-pentagon-c2h7.squarespace.com/

Hi!

I really tried not to annoy anyone with my question as I'm sure some people faced the same issue but I can't find the right code for my problem.

On my home page, I've got a row of 4 product blocks that automatically change into 1 per row on mobile.

How can I change them in 2 per row?

Same thing with the text blocks in the footer.

Password:1234

Thanks in advance,

Yann 

Do you still need help?

Hi guys,

Thank you very much for taking the time to help.

@bangank36 Thank you so much mate. It worked perfectly. I think I tried this code before but use it with a wrong block id.

I could use your help with the text blocks in the footer. Would like to make one row with the text blocks and then the newsletter form underneath.

Thank you again

Hi all, 

Thanks so much for posting this, it has been really helpful and fixed my problem also. I have noticed, however that it doesn't work on all the product blocks on the site. I had previously thought it was because some product blocks were in an accordion but I have removed them from this and it is still not working. 

It works on the top section of product blocks but when these lower down blocks are separated by heading text it stops working. Are you able to help?

Thanks,

Chloe

14 hours ago, cloecloa said:

Hi all, 

Thanks so much for posting this, it has been really helpful and fixed my problem also. I have noticed, however that it doesn't work on all the product blocks on the site. I had previously thought it was because some product blocks were in an accordion but I have removed them from this and it is still not working. 

It works on the top section of product blocks but when these lower down blocks are separated by heading text it stops working. Are you able to help?

Thanks,

Chloe

What is your site url? We can check easier

Hello, thank you for replying! The page I am trying to sort this on is below

https://www.howaboutnope.com/shop

On 9/5/2022 at 3:27 PM, cloecloa said:

Hello, thank you for replying! The page I am trying to sort this on is below

 

https://www.howaboutnope.com/shop

Try adding to Design > Custom CSS
 

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1662289636552_14255~.row .span-4 {
    width: 50% !important;
    float: left !important;
}
}

Hi Tuanphan, 

Thank you so so much for your help! That sorted the bulk buy sections and I can swap out the block-yui code for all other sections. 

I did try it for the "single bars" section and it doesn't work, from what I see it only has a block- Id. I attached a screenshot because not sure if it is possible in accordion or if I need a different id number?

On 9/6/2022 at 11:39 PM, cloecloa said:

Hi Tuanphan, 

Thank you so so much for your help! That sorted the bulk buy sections and I can swap out the block-yui code for all other sections. 

I did try it for the "single bars" section and it doesn't work, from what I see it only has a block- Id. I attached a screenshot because not sure if it is possible in accordion or if I need a different id number?

With single bars, use this code

@media screen and (max-width:640px) {
div#block-665a664b59457cba898d+div .span-6 {
    width: 50% !important;
    float: left !important;
}
}

thank you so so much for you help!