How do I force 2 Column text block for mobile?

Site URL: https://www.rogerroger.co/

 Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1602676911638_78103+.row>.col {
    width: 50% !important;
    float: left !important;
}
}

Thank you @tuanphan ! Helpful as always

hi @tuanphan, would you be able to help me with a similar issue with a website i'm working on? i have two text blocks, but they also turn into a single column on mobile 😞 i tried to use the code you provided, but was unable to have it work. any help would be much appreciated!  

url: http://www.keikofukazawa.com/cvpress

Desktop:


Mobile:

On 3/25/2023 at 8:39 AM, lovemcho said:

hi @tuanphan, would you be able to help me with a similar issue with a website i'm working on? i have two text blocks, but they also turn into a single column on mobile 😞 i tried to use the code you provided, but was unable to have it work. any help would be much appreciated!  

url: http://www.keikofukazawa.com/cvpress

Desktop:


Mobile:

Add to Design > Custom CSS

@media screen and (max-width:900px) {
div#page-5884645f893fc0ce706914e1 .span-2 {
    width: 19% !important;
    float: left !important;
}
}

thank you so much for your help and reply @tuanphan!! do you know if there's a way to make the text smaller on mobile view? though the columns are now side-by-side the line breaks in the copy are misaligned with the dates. ><"

On 3/29/2023 at 11:26 AM, lovemcho said:

thank you so much for your help and reply @tuanphan!! do you know if there's a way to make the text smaller on mobile view? though the columns are now side-by-side the line breaks in the copy are misaligned with the dates. ><"

Use this new code

@media screen and (max-width:900px) {
div#page-5884645f893fc0ce706914e1 .span-2 {
    width: 19% !important;
    float: left !important;
}
div#page-5884645f893fc0ce706914e1 * {
	font-size: 12px !important;
}
}

Thank you soOoooOOoOOoooo much @tuanphan! Coding genius 💻💡✨