2 columns view on mobile with a button

Site URL: http://fakoshimaesentai.squarespace.com

Site URL: http://fakoshimaesentai.squarespace.com

Hi everyone, I am trying to create a 2 column grid on mobile using css, but the codes that I found do not work for me. I used custom css to create "swap of hover" images, and Now I need to put everything in 2 columns. Another thing is that I need to put a text box and a button underneath each image. If someone knows how to figure it out please help. Appriciate.

The page I need to figure out -https://fakoshimaesentai.squarespace.com/290405038627

Thanks!

@tuanphan I ve seen that you are an expert when it comes to this problem, maybe you can help? thanks! 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* 2 products row */
div#page-section-5f22abf5ea1ff26c41f5d410>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

@tuanphan Thanks! it works perfectly, but only for 4 first images , is there a way I can apply it for the whole page? 

48 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* 2 products row */
div#page-section-5f22abf5ea1ff26c41f5d410>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

 

It also doesn't look right when I view it on my phone

New code

@media screen and (max-width:767px) {
div#page-section-5f22abf5ea1ff26c41f5d410>.row>.col, div#page-section-5f27e34f062baa1f2b1895e7>.row>.span-3, div#page-section-5f293f044f222031501d1032>.row>.span-3, div#page-section-5f294325c93a86510d89ba7b>.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f22abf5ea1ff26c41f5d410>.row>.col:nth-child(2n+1), div#page-section-5f27e34f062baa1f2b1895e7>.row>.span-3:nth-child(2n+1), div#page-section-5f293f044f222031501d1032>.row>.span-3:nth-child(2n+1), div#page-section-5f294325c93a86510d89ba7b>.row>.span-3:nth-child(2n+1) {
    clear: left !important;
}
}

Hi there I am trying to do exactly the same for my site. 

Here is the URL; 

https://www.batchcoffee.co.uk/gear

Thanks in advance!

On 3/19/2021 at 10:30 PM, TomBatch said:

Hi there I am trying to do exactly the same for my site. 

Here is the URL; 

https://www.batchcoffee.co.uk/gear

Thanks in advance!

Add to Design > custom CSS

/* filter methods mobile */
@media screen and (max-width:767px) {
div#page-5ec7ee0076c7027645d0d1df .span-12>.row:nth-child(9)>.span-3 .image-block {
    width: 50% !important;
    float: left !important;
    clear: none !important;
    padding: 0;
}
div#page-5ec7ee0076c7027645d0d1df .span-12>.row:nth-child(9)>.span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

Thank you so much. Sorry I only just received this! It worked a treat! Thanks you! I don't suppose you have the same code for the second image block on the page? (Brewing Equipment) ... Or show me how to obtain the specific code for that block?

🙂

On 4/26/2021 at 10:36 PM, TomBatch said:

Thank you so much. Sorry I only just received this! It worked a treat! Thanks you! I don't suppose you have the same code for the second image block on the page? (Brewing Equipment) ... Or show me how to obtain the specific code for that block?

🙂

Add to Design > Custom CSS

/* Equipment mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1616166415745_149441 ~ .row .span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1616166415745_149441 ~ .row .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

Hi there, I'm trying to do this for my site too, but can't get it to work 😞 

I'm hoping to get the three buttons so sit alongside each other, so they're in one row / 1/3 each

Site: https://podread.org/subscribe

Password: READER

Thanks in advance for your help! 

On 7/12/2021 at 12:38 PM, Laura_FOF said:

Hi there, I'm trying to do this for my site too, but can't get it to work 😞 

I'm hoping to get the three buttons so sit alongside each other, so they're in one row / 1/3 each

Site: https://podread.org/subscribe

Password: READER

Thanks in advance for your help! 

 

Add to Design > Custom CSS

/* Mobile-3 buttons side by side */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1625982218819_32768+.row>.col:nth-child(-n+3) {
    width: 33.3333% !important;
    float: left !important;
}
}

Hello @tuanphan 

I've tried a few variations of this code for a site I'm building but it's not working, hoping you can help me too please!

https://mypie.squarespace.com/beef

pw - mypie21

It's the red section at the top with the categories that I'm trying to display as two columns on mobile if possible?

Thanks in advance!

Marie

On 10/26/2021 at 8:10 PM, marie.dilworth said:

Hello @tuanphan 

I've tried a few variations of this code for a site I'm building but it's not working, hoping you can help me too please!

https://mypie.squarespace.com/beef

pw - mypie21

It's the red section at the top with the categories that I'm trying to display as two columns on mobile if possible?

Thanks in advance!

Marie

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-6176baf2b7006960845b04b4 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6176baf2b7006960845b04b4 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

18 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-6176baf2b7006960845b04b4 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6176baf2b7006960845b04b4 .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

 

Thank you so much @tuanphan it worked perfectly, you're a legend!

Marie