20 hours ago, Tru-Lab said:

Hi, I have tried all the code but I am not able to create 2 columns in my mobile website: https://www.tru-lab.com/ . We would like that it works in all the home page (shop collections section but also all the products sections (Verrine and Spreads) and icons section). Can you help us? Thank you very much.

Add to Design > Custom CSS

/* Mobile 2 columns */
@media screen and (max-width:640px) {
/* Shop Collection */
div#page-622b60c51723d94c7a52c99c .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-622b60c51723d94c7a52c99c .span-3:nth-child(2n+1) {
    clear: left;
}
section#verrine .span-3 {
    width: 50% !important;
    float: left !important;
}
section#verrine .span-3:nth-child(2n+1) {
    clear: left;
}}

On 3/15/2022 at 7:52 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile 2 columns */
@media screen and (max-width:640px) {
/* Shop Collection */
div#page-622b60c51723d94c7a52c99c .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-622b60c51723d94c7a52c99c .span-3:nth-child(2n+1) {
    clear: left;
}
section#verrine .span-3 {
    width: 50% !important;
    float: left !important;
}
section#verrine .span-3:nth-child(2n+1) {
    clear: left;
}}

 

Thank you very much! Would be possible to have it also in the section:

THE MANY, MANY

SPREAD POSSIBILITIES

Thank you again!

On 3/18/2022 at 10:05 PM, Tru-Lab said:

Thank you very much! Would be possible to have it also in the section:

THE MANY, MANY

SPREAD POSSIBILITIES

Thank you again!

Hi.

Which page are you referring to? I don't see that section on homepage

2 hours ago, tuanphan said:

Hi.

Which page are you referring to? I don't see that section on homepage

Hi @tuanphan, you can find attached the section in the homepage.

As you can see it is the only section that is not in 2 columns and I'd like to have it in 2 columns as the rest of the homepage.

Thank you very much

15 hours ago, Tru-Lab said:

Hi @tuanphan, you can find attached the section in the homepage.

As you can see it is the only section that is not in 2 columns and I'd like to have it in 2 columns as the rest of the homepage.

Thank you very much

Add to Design > Custom CSS

/* Mobile Home 2 columns */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(2n+1) {
    clear: left !important;
}
div#block-yui_3_17_2_1_1647015266317_8659 + .row h1 {
    font-size: 22px;
}
}

On 3/22/2022 at 4:39 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile Home 2 columns */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(2n+1) {
    clear: left !important;
}
div#block-yui_3_17_2_1_1647015266317_8659 + .row h1 {
    font-size: 22px;
}
}

 

Hi, we have a problem with the 2 columns, can you help us? Thank you

21 hours ago, Tru-Lab said:

Hi, we have a problem with the 2 columns, can you help us? Thank you

Which page are you referring to?

On 3/26/2022 at 9:20 AM, tuanphan said:

Which page are you referring to?

Hi, we are always in the homepage (www.tru-lab.com) around the middle of the page. As you can see here the 2 mobile columns code doesn't work with the section 'dipping' and 'baked'. Can you help me? thank you

On 3/28/2022 at 8:23 PM, Tru-Lab said:

Hi, we are always in the homepage (www.tru-lab.com) around the middle of the page. As you can see here the 2 mobile columns code doesn't work with the section 'dipping' and 'baked'. Can you help me? thank you

Don't remove any code in your current code. Add this to Design > Custom CSS

/* Dipping Baked mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(3) {
    width: 100% !important;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(3) {display: grid;}

div#block-yui_3_17_2_1_1647016147443_24671 {
    grid-row: 2;
}
}

On 3/30/2022 at 4:03 AM, tuanphan said:

Don't remove any code in your current code. Add this to Design > Custom CSS

/* Dipping Baked mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(3) {
    width: 100% !important;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
div#block-yui_3_17_2_1_1647015266317_8659+.row .span-4:nth-child(3) {display: grid;}

div#block-yui_3_17_2_1_1647016147443_24671 {
    grid-row: 2;
}
}

 

Thank you! Now everything works!

Hi there, 

I also have tried several codes but could not manage to get the pages from my site show two images per row on mobile. Like for instance on this page:

https://www.rosaeparis.com/shop/tops

Basically, I would like the page to look the same on mobile as on laptop, in miniature.

Thanks very much in advance for your help,

On 9/3/2022 at 9:48 AM, ClaireTeixeira said:

Hi there, 

I also have tried several codes but could not manage to get the pages from my site show two images per row on mobile. Like for instance on this page:

https://www.rosaeparis.com/shop/tops

Basically, I would like the page to look the same on mobile as on laptop, in miniature.

Thanks very much in advance for your help,

Try adding to Design > Custom CSS

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