Jump to content

Two column section on mobile - Squarespace 7.1

Go to solution Solved by tuanphan,

Recommended Posts

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!

Screen Shot 2021-05-09 at 5.39.24 pm.png

Screen Shot 2021-05-09 at 5.39.36 pm.png

Screen Shot 2021-05-09 at 5.39.46 pm.png

Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

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

image.thumb.png.00a9ccf9247c705539d98957aac8ae29.png

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

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.

Link to comment
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!)

Link to comment

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>
 

Link to comment
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!)

Link to comment
  • 2 weeks later...
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;
}
}

image.thumb.png.00a9ccf9247c705539d98957aac8ae29.png

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

 

Screen Shot 2021-05-26 at 6.00.23 pm.png

Screen Shot 2021-05-26 at 6.00.31 pm.png

Link to comment
  • Solution
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!)

Link to comment
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! 🙂

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

apple-cobalt-rm97.squarespace.com-01-min

2. (Tablet-Homepage) Change to 3 items/row?

apple-cobalt-rm97.squarespace.com-02-min

3. (Tablet-Homepage) Text overlap

apple-cobalt-rm97.squarespace.com-03-min

4. (Tablet-Footer) Increase right column width?

apple-cobalt-rm97.squarespace.com-04-min

5. (Mobile-Programs) text overlap

apple-cobalt-rm97.squarespace.com-05-min

6. (Mobile-Programs) Similar

apple-cobalt-rm97.squarespace.com-06-min

7. (Tablet-Programs) Similar

apple-cobalt-rm97.squarespace.com-07-min

8. (Tablet-News & Events) Similar

apple-cobalt-rm97.squarespace.com-08-min

9. (Tablet-About)

apple-cobalt-rm97.squarespace.com-09-min

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
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?

apple-cobalt-rm97.squarespace.com-01-min

2. (Tablet-Homepage) Change to 3 items/row?

apple-cobalt-rm97.squarespace.com-02-min

3. (Tablet-Homepage) Text overlap

apple-cobalt-rm97.squarespace.com-03-min

4. (Tablet-Footer) Increase right column width?

apple-cobalt-rm97.squarespace.com-04-min

5. (Mobile-Programs) text overlap

apple-cobalt-rm97.squarespace.com-05-min

6. (Mobile-Programs) Similar

apple-cobalt-rm97.squarespace.com-06-min

7. (Tablet-Programs) Similar

apple-cobalt-rm97.squarespace.com-07-min

8. (Tablet-News & Events) Similar

apple-cobalt-rm97.squarespace.com-08-min

9. (Tablet-About)

apple-cobalt-rm97.squarespace.com-09-min

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?

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

apple-cobalt-rm97.squarespace.com-01-min

2. (Tablet-Homepage) Change to 3 items/row?

apple-cobalt-rm97.squarespace.com-02-min

3. (Tablet-Homepage) Text overlap

apple-cobalt-rm97.squarespace.com-03-min

4. (Tablet-Footer) Increase right column width?

apple-cobalt-rm97.squarespace.com-04-min

5. (Mobile-Programs) text overlap

apple-cobalt-rm97.squarespace.com-05-min

6. (Mobile-Programs) Similar

apple-cobalt-rm97.squarespace.com-06-min

7. (Tablet-Programs) Similar

apple-cobalt-rm97.squarespace.com-07-min

8. (Tablet-News & Events) Similar

apple-cobalt-rm97.squarespace.com-08-min

9. (Tablet-About)

apple-cobalt-rm97.squarespace.com-09-min

@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?

 

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.