Jump to content

2 Columns on mobile - CSS help, please!

Go to solution Solved by DustinWilliam,

Recommended Posts

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

Get Our MultiCurrency Extension for Your Site (7.0 & 7.1)

Feel free to reach out for help and projects!

The Squarespacer Limited

Link to comment
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.

Link to comment
  • Solution

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;
}
}

Edited by DustinWilliam
Link to comment
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!

Get Our MultiCurrency Extension for Your Site (7.0 & 7.1)

Feel free to reach out for help and projects!

The Squarespacer Limited

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.