Leath Posted May 9, 2021 Posted May 9, 2021 Site URL: https://www.kendracampbell.com.au/home2 Hi! I have dropped in some custom made icons using the markdown block (I did this rather than an image block so I could keep the icons as svg). What I am now trying to achieve is to have these blocks break into two columns on mobile. Currently they just stack one on top of each other but that just makes it seem like you're scrolling for ages to get past that section. If anybody has any idea how to achieve this it would be greatly appreciated!
tuanphan Posted May 9, 2021 Posted May 9, 2021 Add to Design > Custom CSS /* Mobile icons 2 columns */ @media screen and (max-width:767px) { div#block-c42e14b64b35b1a56675+.row .span-6>.row>.col { width: 50% !important; float: left !important; } div#block-c42e14b64b35b1a56675+.row>.span-2 { width: 50% !important; float: left !important; } div#block-c42e14b64b35b1a56675~.row>.span-2 { width: 50% !important; float: left !important; } } 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!)
Leath Posted May 9, 2021 Author Posted May 9, 2021 Amazing this worked perfectly! Thank you! One other thing I would ideally like to achieve is to make each of the icons links to another page. Any ideas how to achieve this? If not I plan on just making the headings the links.
tuanphan Posted May 12, 2021 Posted May 12, 2021 On 5/10/2021 at 6:33 AM, Leath said: Amazing this worked perfectly! Thank you! One other thing I would ideally like to achieve is to make each of the icons links to another page. Any ideas how to achieve this? If not I plan on just making the headings the links. Hi. Can you send all code in First Markdown Block? I will test on my demo site with link tag. 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!)
Leath Posted May 12, 2021 Author Posted May 12, 2021 Sure! <svg class="svg-icon-offer" viewBox="0 0 99 90" style="enable-background:new 0 0 99 90;" xml:space="preserve"> <style type="text/css"> .st0{fill:#CD804F;} .st1{fill:#FFFFFF;} </style> <g> <path class="st0" d="M0,42.87c0.2-8.57,1.28-16.24,5.9-22.94C10.42,13.37,16.95,9.42,24,6.14c8.24-3.83,17.09-4.89,25.98-5.76 c7.65-0.75,15.25-0.49,22.69,1.58c14.08,3.91,22.3,13.2,25.41,27.38c2.43,11.09-0.11,21.12-5.91,30.52 c-7.04,11.4-16.64,20.01-28.75,25.8c-5.37,2.57-10.98,4.06-16.99,4.3c-13.35,0.52-24.66-4.11-33.94-13.49 C4.8,68.71,0.94,59.13,0.38,48.22C0.28,46.21,0.1,44.21,0,42.87z"/> <path class="st1" d="M53.43,67.47c-0.63,0-1.19-0.45-1.3-1.1c-0.07-0.41-1.33-7.92-0.9-14.58c-0.01-0.04-0.02-0.07-0.04-0.11 c-0.1-0.36-0.04-0.72,0.13-1.02c0.16-1.63,0.43-3.17,0.85-4.51c0.37-1.17,0.66-2.38,0.96-3.65c1.4-5.88,2.98-12.55,13.98-15.12 l0.98-0.23l0.48,0.89c0.14,0.26,3.37,6.35,0.6,12.88c-2.16,5.12-7.32,8.95-15.34,11.39c-0.34,6.29,0.88,13.54,0.89,13.64 c0.12,0.72-0.36,1.4-1.08,1.53C53.58,67.46,53.51,67.47,53.43,67.47z M66.67,30.21C58.21,32.56,57,37.69,55.71,43.1 c-0.3,1.27-0.61,2.58-1.02,3.85c-0.24,0.75-0.42,1.59-0.56,2.48c6.62-2.2,10.86-5.4,12.62-9.55 C68.45,35.85,67.35,31.94,66.67,30.21z"/> <path class="st1" d="M50.02,52.75c-4.05,0-11.94-0.75-17.57-6.03c-4.45-4.17-6.51-10.27-6.13-18.12l0.04-0.89l0.84-0.29 c0.31-0.11,7.8-2.66,14.99,1.69c6.1,3.69,9.99,11.1,11.59,22.03l0.2,1.35l-1.36,0.15C52.48,52.64,51.51,52.75,50.02,52.75z M28.93,29.67c-0.14,6.57,1.65,11.65,5.32,15.11c5.38,5.05,13.49,5.39,16.69,5.3c-1.59-9.32-4.98-15.62-10.11-18.72 C35.99,28.43,30.9,29.2,28.93,29.67z"/> </g> </svg>
tuanphan Posted May 14, 2021 Posted May 14, 2021 On 5/12/2021 at 10:25 AM, Leath said: Sure! <svg class="svg-icon-offer" viewBox="0 0 99 90" style="enable-background:new 0 0 99 90;" xml:space="preserve"> <style type="text/css"> .st0{fill:#CD804F;} .st1{fill:#FFFFFF;} </style> <g> <path class="st0" d="M0,42.87c0.2-8.57,1.28-16.24,5.9-22.94C10.42,13.37,16.95,9.42,24,6.14c8.24-3.83,17.09-4.89,25.98-5.76 c7.65-0.75,15.25-0.49,22.69,1.58c14.08,3.91,22.3,13.2,25.41,27.38c2.43,11.09-0.11,21.12-5.91,30.52 c-7.04,11.4-16.64,20.01-28.75,25.8c-5.37,2.57-10.98,4.06-16.99,4.3c-13.35,0.52-24.66-4.11-33.94-13.49 C4.8,68.71,0.94,59.13,0.38,48.22C0.28,46.21,0.1,44.21,0,42.87z"/> <path class="st1" d="M53.43,67.47c-0.63,0-1.19-0.45-1.3-1.1c-0.07-0.41-1.33-7.92-0.9-14.58c-0.01-0.04-0.02-0.07-0.04-0.11 c-0.1-0.36-0.04-0.72,0.13-1.02c0.16-1.63,0.43-3.17,0.85-4.51c0.37-1.17,0.66-2.38,0.96-3.65c1.4-5.88,2.98-12.55,13.98-15.12 l0.98-0.23l0.48,0.89c0.14,0.26,3.37,6.35,0.6,12.88c-2.16,5.12-7.32,8.95-15.34,11.39c-0.34,6.29,0.88,13.54,0.89,13.64 c0.12,0.72-0.36,1.4-1.08,1.53C53.58,67.46,53.51,67.47,53.43,67.47z M66.67,30.21C58.21,32.56,57,37.69,55.71,43.1 c-0.3,1.27-0.61,2.58-1.02,3.85c-0.24,0.75-0.42,1.59-0.56,2.48c6.62-2.2,10.86-5.4,12.62-9.55 C68.45,35.85,67.35,31.94,66.67,30.21z"/> <path class="st1" d="M50.02,52.75c-4.05,0-11.94-0.75-17.57-6.03c-4.45-4.17-6.51-10.27-6.13-18.12l0.04-0.89l0.84-0.29 c0.31-0.11,7.8-2.66,14.99,1.69c6.1,3.69,9.99,11.1,11.59,22.03l0.2,1.35l-1.36,0.15C52.48,52.64,51.51,52.75,50.02,52.75z M28.93,29.67c-0.14,6.57,1.65,11.65,5.32,15.11c5.38,5.05,13.49,5.39,16.69,5.3c-1.59-9.32-4.98-15.62-10.11-18.72 C35.99,28.43,30.9,29.2,28.93,29.67z"/> </g> </svg> Add a tag in top of Markdown code, like this <a href="https://google.com" class="t-click"></a> <svg class="svg-icon-offer" viewBox="0 0 99 90" style="enable-background:new 0 0 99 90;" xml:space="preserve"> <style type="text/css"> .st0{fill:#CD804F;} .st1{fill:#FFFFFF;} </style> <g> <path class="st0" d="M0,42.87c0.2-8.57,1.28-16.24,5.9-22.94C10.42,13.37,16.95,9.42,24,6.14c8.24-3.83,17.09-4.89,25.98-5.76 c7.65-0.75,15.25-0.49,22.69,1.58c14.08,3.91,22.3,13.2,25.41,27.38c2.43,11.09-0.11,21.12-5.91,30.52 c-7.04,11.4-16.64,20.01-28.75,25.8c-5.37,2.57-10.98,4.06-16.99,4.3c-13.35,0.52-24.66-4.11-33.94-13.49 C4.8,68.71,0.94,59.13,0.38,48.22C0.28,46.21,0.1,44.21,0,42.87z"/> <path class="st1" d="M53.43,67.47c-0.63,0-1.19-0.45-1.3-1.1c-0.07-0.41-1.33-7.92-0.9-14.58c-0.01-0.04-0.02-0.07-0.04-0.11 c-0.1-0.36-0.04-0.72,0.13-1.02c0.16-1.63,0.43-3.17,0.85-4.51c0.37-1.17,0.66-2.38,0.96-3.65c1.4-5.88,2.98-12.55,13.98-15.12 l0.98-0.23l0.48,0.89c0.14,0.26,3.37,6.35,0.6,12.88c-2.16,5.12-7.32,8.95-15.34,11.39c-0.34,6.29,0.88,13.54,0.89,13.64 c0.12,0.72-0.36,1.4-1.08,1.53C53.58,67.46,53.51,67.47,53.43,67.47z M66.67,30.21C58.21,32.56,57,37.69,55.71,43.1 c-0.3,1.27-0.61,2.58-1.02,3.85c-0.24,0.75-0.42,1.59-0.56,2.48c6.62-2.2,10.86-5.4,12.62-9.55 C68.45,35.85,67.35,31.94,66.67,30.21z"/> <path class="st1" d="M50.02,52.75c-4.05,0-11.94-0.75-17.57-6.03c-4.45-4.17-6.51-10.27-6.13-18.12l0.04-0.89l0.84-0.29 c0.31-0.11,7.8-2.66,14.99,1.69c6.1,3.69,9.99,11.1,11.59,22.03l0.2,1.35l-1.36,0.15C52.48,52.64,51.51,52.75,50.02,52.75z M28.93,29.67c-0.14,6.57,1.65,11.65,5.32,15.11c5.38,5.05,13.49,5.39,16.69,5.3c-1.59-9.32-4.98-15.62-10.11-18.72 C35.99,28.43,30.9,29.2,28.93,29.67z"/> </g> </svg> Next, add this to Design > Custom CSS /* Make icons clickable */ a.t-click { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } 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!)
Leath Posted May 26, 2021 Author Posted May 26, 2021 On 5/10/2021 at 1:05 AM, tuanphan said: Add to Design > Custom CSS /* Mobile icons 2 columns */ @media screen and (max-width:767px) { div#block-c42e14b64b35b1a56675+.row .span-6>.row>.col { width: 50% !important; float: left !important; } div#block-c42e14b64b35b1a56675+.row>.span-2 { width: 50% !important; float: left !important; } div#block-c42e14b64b35b1a56675~.row>.span-2 { width: 50% !important; float: left !important; } } Hi @tuanphan can i ask how i could apply this method to other sites? I am currently working on another clients site and I couldn't get this code to work on it. Any ideas? My site is https://apple-cobalt-rm97.squarespace.com/ password aafro
tuanphan Posted May 26, 2021 Posted May 26, 2021 1 hour ago, Leath said: Hi @tuanphan can i ask how i could apply this method to other sites? I am currently working on another clients site and I couldn't get this code to work on it. Any ideas? My site is https://apple-cobalt-rm97.squarespace.com/ password aafro Add to Design > Custom CSS /* Mobile 2 columns */ @media screen and (max-width:767px) { div#page-section-60ac572ffa483e72be7f8385 .span-4 { width: 100% !important; } div#page-section-60ac572ffa483e72be7f8385 .span-4 .span-2 { width: 50% !important; float: left !important; } } 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!)
Leath Posted May 26, 2021 Author Posted May 26, 2021 13 hours ago, tuanphan said: Add to Design > Custom CSS /* Mobile 2 columns */ @media screen and (max-width:767px) { div#page-section-60ac572ffa483e72be7f8385 .span-4 { width: 100% !important; } div#page-section-60ac572ffa483e72be7f8385 .span-4 .span-2 { width: 50% !important; float: left !important; } } Amazing that worked! Thank you once again! 🙂
tuanphan Posted May 28, 2021 Posted May 28, 2021 On 5/27/2021 at 6:52 AM, Leath said: Amazing that worked! Thank you once again! 🙂 Do you need to fix these problems? Site URL – https://apple-cobalt-rm97.squarespace.com/ 1. (Tablet-Homepage) Increase text box width? 2. (Tablet-Homepage) Change to 3 items/row? 3. (Tablet-Homepage) Text overlap 4. (Tablet-Footer) Increase right column width? 5. (Mobile-Programs) text overlap 6. (Mobile-Programs) Similar 7. (Tablet-Programs) Similar 8. (Tablet-News & Events) Similar 9. (Tablet-About) 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!)
Leath Posted May 30, 2021 Author Posted May 30, 2021 On 5/29/2021 at 2:05 AM, tuanphan said: Do you need to fix these problems? Site URL – https://apple-cobalt-rm97.squarespace.com/ 1. (Tablet-Homepage) Increase text box width? 2. (Tablet-Homepage) Change to 3 items/row? 3. (Tablet-Homepage) Text overlap 4. (Tablet-Footer) Increase right column width? 5. (Mobile-Programs) text overlap 6. (Mobile-Programs) Similar 7. (Tablet-Programs) Similar 8. (Tablet-News & Events) Similar 9. (Tablet-About) Oh absolutely. I currently have the line hight across the whole site quite tight. If I new how to just decrease the line hight in the programs section on the home page only, then I could adjust the line height across the whole site to be larger! which would solve most of those problems. Any ideas?
Leath Posted June 1, 2021 Author Posted June 1, 2021 On 5/26/2021 at 7:56 PM, tuanphan said: Add to Design > Custom CSS /* Mobile 2 columns */ @media screen and (max-width:767px) { div#page-section-60ac572ffa483e72be7f8385 .span-4 { width: 100% !important; } div#page-section-60ac572ffa483e72be7f8385 .span-4 .span-2 { width: 50% !important; float: left !important; } } On 5/29/2021 at 2:05 AM, tuanphan said: Do you need to fix these problems? Site URL – https://apple-cobalt-rm97.squarespace.com/ 1. (Tablet-Homepage) Increase text box width? 2. (Tablet-Homepage) Change to 3 items/row? 3. (Tablet-Homepage) Text overlap 4. (Tablet-Footer) Increase right column width? 5. (Mobile-Programs) text overlap 6. (Mobile-Programs) Similar 7. (Tablet-Programs) Similar 8. (Tablet-News & Events) Similar 9. (Tablet-About) @tuanphan i started a new question earlier with this site where I am having problems around alignment. Maybe your have some idea how to fix?
Recommended Posts
Archived
This topic is now archived and is closed to further replies.