2 Columns on mobile - CSS help, please!

Site URL: https://www.dustin.land/links2

Hey everyone, 

Need a hand with some CSS. I would like the 2 colums of text (and round photos) to retain as 2 side-by-side columns on mobile. By default, on mobile, the 2nd column will go below the first. I don't know how to address the elements and tell it to do that. 

Any help would be great! Thank you! 🙂

Dustin

6 hours ago, DustinWilliam said:

Site URL: https://www.dustin.land/links2

Hey everyone, 

Need a hand with some CSS. I would like the 2 colums of text (and round photos) to retain as 2 side-by-side columns on mobile. By default, on mobile, the 2nd column will go below the first. I don't know how to address the elements and tell it to do that. 

Any help would be great! Thank you! 🙂

Dustin

Please go to design>custom CSS and paste the following code
 

@media screen and (max-width: 767px) {
#yui_3_17_2_1_1652335736685_123 {   
    padding: 0;
    display: flex;
    width: 50% !important;
    align-content: flex-start;
    flex-direction: column;
    margin: 0;
    float: left !important;

}
#yui_3_17_2_1_1652335736685_143 {
    align-content: flex-start;
    flex-direction: column;
    width: 50% !important;
    margin: 0;
    display: flex;
    padding: 0;
}
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works. Thanks

1 hour ago, TheSquareSpacer said:

Please go to design>custom CSS and paste the following code
 

@media screen and (max-width: 767px) {
#yui_3_17_2_1_1652335736685_123 {   
    padding: 0;
    display: flex;
    width: 50% !important;
    align-content: flex-start;
    flex-direction: column;
    margin: 0;
    float: left !important;

}
#yui_3_17_2_1_1652335736685_143 {
    align-content: flex-start;
    flex-direction: column;
    width: 50% !important;
    margin: 0;
    display: flex;
    padding: 0;
}
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works. Thanks

Thanks for the code. Sadly this has no effect. On mobile, the columns still stack and don’t display side by side.

On 5/13/2022 at 9:18 AM, DustinWilliam said:

I solved it! I used different section IDs and it finally reacted! Thanks for the help. I used:

 

@media screen and (max-width: 767px) {
#yui_3_17_2_1_1652415218979_356 {   
    padding: 0;
    display: flex;
    width: 50% !important;
    align-content: flex-start;
    flex-direction: column;
    margin: 0;
    float: left !important;

}
#yui_3_17_2_1_1652415218979_376 {
    align-content: flex-start;
    flex-direction: column;
    width: 50% !important;
    margin: 0;
    display: flex;
    padding: 0;
}
}

I am glad it worked out for you! you can this code anywhere in the side just need to find the right IDs as you did!