Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

2 Column Mobile View


Anthony_Richardson

Question

Site URL: http://www.simpledwelling.net/link-in-bio

Hi everyone,

I'm creating a 'link in bio' page on my website which will sit on the Instagram account's profile. Because Instagram is mainly viewed on mobile, I'm assuming this page will only be viewed on mobile as well. I understand Squarespace's responsiveness, but I'm wondering if it's possible to override the single-column layout on mobile and replace it with two-columns?

I'd be only looking to apply it to this single page. The page will be made up of multiple single-images with the caption text below.

I've attached an example.

Any help would be amazing.

IMG_3585.PNG

Link to comment

Recommended Posts

  • 0

Hi @tuanphan,
What about a 2 column view on mobile and 3 column view on tablet (when your original design is 4 columns)?
I've tried the following code, but only get the first half right:

@media screen and (max-width:767px) {
div#page-section-??? .span-12 {
.span-3 {
    width: 50% !important;
    float: left !important;
  margin-bottom: 0 !important;
}
.span-3:nth-child(2n+1) {
    clear: left !important;
}}}

@media screen and (max-width:1200px) {
div#page-section-??? .span-12
.span-4 {
    width: 33.333% !important;
    float: left !important;
}
  .span-4:nth-child(2n+1) {
    clear: left !important;
}}

 

Edited by nicolusse88
Link to comment
  • 0
3 hours ago, song said:

Hello there, could you please teach me how to display two column on mobile?

Here is the link

https://www.no-boundaries.co.uk/memberships

As you see, the icon and description becomes up and down but it's side to side on the PC.

 

1809579280_2021-12-219_11_11.thumb.png.4c05b5eaa6a45eb0e0287f4fc8a29f87.png854476454_2021-12-219_13_35.thumb.png.2588e6e977927ee4c950ebd60d9066e3.png

 

 

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="61beb761ad8d292abaec3142"] .sqs-layout  .span-4 {
    width: 50% !important;
    float: left !important;
  }
}

Let me know how it works on your site

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
1 hour ago, nicolusse88 said:

Hi @tuanphan,
What about a 2 column view on mobile and 3 column view on tablet (when your original design is 4 columns)?
I've tried the following code, but only get the first half right:

@media screen and (max-width:767px) {
div#page-section-??? .span-12 {
.span-3 {
    width: 50% !important;
    float: left !important;
  margin-bottom: 0 !important;
}
.span-3:nth-child(2n+1) {
    clear: left !important;
}}}

@media screen and (max-width:1200px) {
div#page-section-??? .span-12
.span-4 {
    width: 33.333% !important;
    float: left !important;
}
  .span-4:nth-child(2n+1) {
    clear: left !important;
}}

 

Can you share the link that directs to that page? So we can take a look

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

@bangank36, here is the link: maisonmariet.fr/shop-articles-en-cuir-1.

Never mind what I said about the 4 column design, it's actually not a smart solution. Although, now I'm experiencing issue with the tablet and mobile view because I can't get the 2 column design to work properly with the following code:

@media screen and (max-width:960px) {
div#page-section-??? .span-12 {
.span-4 {
    width: 50% !important;
    float: left !important;
}
.span-3:nth-child(2n+1) {
    clear: left !important;
}}}

 

Link to comment
  • 0

@nicolusse88 Try remove this code

@media screen and (max-width: 960px) {
    div#page-section-61c1e1fd0b468b2ee43fa6e5 .span-12 .span-4 {
        width:50% !important;
        float: left !important
    }

    div#page-section-61c1e1fd0b468b2ee43fa6e5 .span-12 .span-3:nth-child(2n+1) {
        clear: left !important
    }
}

and use this new code

/* Mobile 2 items */
@media screen and (max-width:767px) {
div#page-section-61c1e1fd0b468b2ee43fa6e5 .span-12>.row:nth-child(-n+2) {
    width: 50% !important;
    float: left !important;
}
div#page-section-61c1e1fd0b468b2ee43fa6e5 .span-12>.row:nth-child(3) .span-4 {
    width: 50% !important;
    float: left !important;
}
}
/* tablet 3 items */
@media screen and (max-width:1024px) and (min-width:768px) {
div#page-section-61c1e1fd0b468b2ee43fa6e5 .span-12 .span-4 {
        width:33.33% !important;
        float: left !important;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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