DustinWilliam Posted May 11, 2022 Share Posted May 11, 2022 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 Link to comment
TheSquareSpacer Posted May 12, 2022 Share Posted May 12, 2022 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 DustinWilliam 1 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
DustinWilliam Posted May 12, 2022 Author Share Posted May 12, 2022 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 DustinWilliam Posted May 13, 2022 Author Solution Share Posted May 13, 2022 (edited) 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 May 13, 2022 by DustinWilliam Link to comment
TheSquareSpacer Posted May 14, 2022 Share Posted May 14, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment