LILAHBEAU Posted October 2, 2021 Share Posted October 2, 2021 Site URL: https://www.lilahbeau.com Hi we are trying to make our mobile site look similar to our desktop version for our home page which has 3 items put next to each other in a 3 column look. We also have a couple of pages that have 2 columns and would like this to show on mobile. I've tried implementing many different codes and using dev tools to try and find the section ids, but can not figure it out. Thank You! Homepage : www.LilahBeau.com would like this to show the 3 sections under the featured slide About: https://lilahbeau.squarespace.com/the-lilah-beau-story Would like this to show 2 columns similar to the desktop version The Collection: https://lilahbeau.squarespace.com/the-collection Would like this to show 2 columns similar to the desktop version Link to comment
tuanphan Posted October 3, 2021 Share Posted October 3, 2021 Add to Design > Custom CSS @media screen and (max-width:767px) { /* Homepage */ div#block-yui_3_17_2_1_1633024183472_5632+.row .span-4 { width: 33.33333% !important; float: left !important; } } With 2 other pages, you mean text (left) - Image (right) or image (left) - text (right) on mobile? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
LILAHBEAU Posted October 6, 2021 Author Share Posted October 6, 2021 On 10/3/2021 at 7:32 AM, tuanphan said: Add to Design > Custom CSS @media screen and (max-width:767px) { /* Homepage */ div#block-yui_3_17_2_1_1633024183472_5632+.row .span-4 { width: 33.33333% !important; float: left !important; } } With 2 other pages, you mean text (left) - Image (right) or image (left) - text (right) on mobile? Either of those are fine. I inserted your code into Custom CSS and am not seeing any change to site. Am I doing something wrong? Link to comment
tuanphan Posted October 6, 2021 Share Posted October 6, 2021 I see it worked here Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
LILAHBEAU Posted October 6, 2021 Author Share Posted October 6, 2021 18 minutes ago, tuanphan said: I see it worked here Yes THANK YOU that actually did work once I stripped out other CSS I had in there. Must have been conflicting. Now I'm trying to get it to look good with changing the text size etc. Right now I have these in there. // Paragraph h1 {font-size:1rem!important} // Header h2 h2 {font-size:1rem!important} // Header h3 h3 {font-size:1rem!important} // Header h4 h4 {font-size:0.65rem!important} } // Paragraph p {font-size:0.75rem!important} I would still like to get the right ID for those other 2 pages, but do you know how to fix this I put the titles on Header 4 to control them instead of Paragraph (see photo) But the spacing when it goes down a line is too much. Thanks! Link to comment
tuanphan Posted October 7, 2021 Share Posted October 7, 2021 On 10/6/2021 at 10:05 AM, LILAHBEAU said: Yes THANK YOU that actually did work once I stripped out other CSS I had in there. Must have been conflicting. Now I'm trying to get it to look good with changing the text size etc. Right now I have these in there. // Paragraph h1 {font-size:1rem!important} // Header h2 h2 {font-size:1rem!important} // Header h3 h3 {font-size:1rem!important} // Header h4 h4 {font-size:0.65rem!important} } // Paragraph p {font-size:0.75rem!important} I would still like to get the right ID for those other 2 pages, but do you know how to fix this I put the titles on Header 4 to control them instead of Paragraph (see photo) But the spacing when it goes down a line is too much. Thanks! Hi, You mean reduce text size (title + paragraph?) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
LILAHBEAU Posted October 8, 2021 Author Share Posted October 8, 2021 Thanks @Tuanphan I think I figured out a solution for that one. Can you possibly help me with making this page show 2 column style on mobile? I've tried adapting the previous code you gave to the block sections on this page with no luck. https://www.lilahbeau.com/the-collection Thanks! Link to comment
tuanphan Posted October 10, 2021 Share Posted October 10, 2021 On 10/8/2021 at 10:54 PM, LILAHBEAU said: Thanks @Tuanphan I think I figured out a solution for that one. Can you possibly help me with making this page show 2 column style on mobile? I've tried adapting the previous code you gave to the block sections on this page with no luck. https://www.lilahbeau.com/the-collection Thanks! Hi, You mean text/image side by side, same as desktop? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.