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
17 hours ago, ryanspacey said:

Hey,

Apologies I was talking about the other content on the page, not the gallery section.

So further up the page, on desktop there's a 50/50 2 col split.
Can this be maintained on mobile?

Thank you ūüôā

Which page url?

15 hours ago, andruuuuu said:

Hi all,

I cant seem to get that code to create any change when added to home>design>custom CSS

my site is uptownphotostudio.com and on mobile the gallery is stacked. I want to retain the masonry look without padding (i came close but when mixing 2x3 images with 3x2 images the site shows big white padding between the images with varying aspect ratios.

please help :)

 

Can you disable "turn of right click"?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
 Hello, I have an amazon affiliate page with amazon blocks that i would like to display two products per row on mobile and tablet. Could you help me with the right custom css that could achieve this? Our website is shop325found.com and our bath page is the page with amazon blocks. Thank you!
Link to comment
  • 0
17 minutes ago, 325found said:

 Hello, I have an amazon affiliate page with amazon blocks that i would like to display two products per row on mobile and tablet. Could you help me with the right custom css that could achieve this? Our website is shop325found.com and our bath page is the page with amazon blocks. Thank you!

Can you share page url? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
12 hours ago, 325found said:

https://shop325found.com/  thank you so much!!

Answered in your own question.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
17 hours ago, 325found said:

Hi!

So is it not possible to create a code that will help us change the layout of our products in our mobile view?

xx

Can you share link to page where you want 2 columns?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
  • 0

With bath

Add to Bath page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  [data-section-id="5f88c5dbeb80365577771242"] .columns-12 .span-3>div {
    float: left !important;
    width: 50%;
    padding: 0;
    clear: none;
}
    [data-section-id="5f88c5dbeb80365577771242"] .columns-12 .span-3>div:nth-child(2n+1) {
    clear: left !important;
}
  }
</style>

Find data section id with. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
  • 0

Add to All beauty page header

<style>
  @media screen and (max-width:640px) {
  div#page-section-5f89e39fcad61e02df323730 .row .span-3 .amazon-block {
    width: 50%;
    float: left !important;
    clear: none !important;
    padding: 0;
}
    div#page-section-5f89e39fcad61e02df323730 .row .span-3 .amazon-block:nth-child(2n+1) {
    clear: left !important;
}
  }
</style>

Add to All bed Page Header

<style>
  @media screen and (max-width:640px) {
  div#page-section-5f8a21912a8b041a1ba1f864 .row .span-3 .amazon-block {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none;
}
    div#page-section-5f8a21912a8b041a1ba1f864 .row .span-3 .amazon-block:nth-child(2n+1) {
    clear: left !important;
}
  }
</style>

Other pages

Next comment

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
10 hours ago, Meganlouise9827 said:

Please help! I'm trying to make my shop / products pages 2 column on mobile, rather than stacked on top of each other. Is this possible? My website is www.signaturetextiles.co.uk

Thank-you!! 

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
  .summary-item-list {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
    .summary-item {
    width: 100% !important;
    padding: 0 !important;
}
    .summary-item img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 11/2/2020 at 12:47 AM, tuanphan said:

Add to All beauty page header


<style>
  @media screen and (max-width:640px) {
  div#page-section-5f89e39fcad61e02df323730 .row .span-3 .amazon-block {
    width: 50%;
    float: left !important;
    clear: none !important;
    padding: 0;
}
    div#page-section-5f89e39fcad61e02df323730 .row .span-3 .amazon-block:nth-child(2n+1) {
    clear: left !important;
}
  }
</style>

Add to All bed Page Header


<style>
  @media screen and (max-width:640px) {
  div#page-section-5f8a21912a8b041a1ba1f864 .row .span-3 .amazon-block {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none;
}
    div#page-section-5f8a21912a8b041a1ba1f864 .row .span-3 .amazon-block:nth-child(2n+1) {
    clear: left !important;
}
  }
</style>

Other pages

Next comment

Thank you soooo much!! Is there different codes for the following? Or can we use the same ones? 

 

https://shop325found.com/all-clothing-accessories

https://shop325found.com/all-decor

https://shop325found.com/all-furniture

https://shop325found.com/all-gadgets-games

https://shop325found.com/all-kitchen

https://shop325found.com/all-pets

https://shop325found.com/gracies-favorites

https://shop325found.com/annas-favorites

Link to comment
  • 0

I am strugling a bit trying to get two blog post summaries in a row on mobile view. This is the code I am using:


@media only screen and (max-width: 850px) {
.sqs-block-summary-v2 .summary-item {
      clear: none !important;
    width: 50% !important;
   padding: 10px !important;
   margin-bottom: auto !important ;
}
.sqs-block-summary-v2 .summary-item:nth-child(2n+1) {
    clear: left !important;
}

Before I added the margin-bottom: auto it worked, but the space between blog post 1 and 3 was too big. I used the inspector (see attached file) to find why the big gap between post 1 and 3. I thought if I set the margin-bottom to 0/auto the issue will be solve. Not quite. The blog post 3 summary appears where I would like it, but the link and metadata dissapears (see picture number 2).

I would highly appreciate tips on this issue?  

margin.png

IMG_4712.PNG

Link to comment
  • 0
2 minutes ago, m_lundberg said:

I am strugling a bit trying to get two blog post summaries in a row on mobile view. This is the code I am using:


@media only screen and (max-width: 850px) {
.sqs-block-summary-v2 .summary-item {
      clear: none !important;
    width: 50% !important;
   padding: 10px !important;
   margin-bottom: auto !important ;
}
.sqs-block-summary-v2 .summary-item:nth-child(2n+1) {
    clear: left !important;
}

Before I added the margin-bottom: auto it worked, but the space between blog post 1 and 3 was too big. I used the inspector (see attached file) to find why the big gap between post 1 and 3. I thought if I set the margin-bottom to 0/auto the issue will be solve. Not quite. The blog post 3 summary appears where I would like it, but the link and metadata dissapears (see picture number 2).

I would highly appreciate tips on this issue?  

Can you share link to summary?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 11/18/2020 at 11:27 PM, m_lundberg said:

Edit above page > Add a Code Block > Paste this code then save & reload your site.

<style>
  @media screen and (max-width:767px) {
  .sqs-block-summary-v2 .summary-item {
    width: 100% !important;
    transform: unset !important;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 11/22/2020 at 2:38 AM, tuanphan said:

Edit above page > Add a Code Block > Paste this code then save & reload your site.


<style>
  @media screen and (max-width:767px) {
  .sqs-block-summary-v2 .summary-item {
    width: 100% !important;
    transform: unset !important;
}
  }
</style>

 

Thanks for the reply. I am not able to get it to work though, I'm not very experienced with squarespace or CSS. I took a screenshot of the insert code, not sure if I have done it right.

I tried with and without my existing code, is this code meant to add to my existing code or to replace it?

Capture.JPG

Link to comment
  • 0
5 hours ago, m_lundberg said:

Thanks for the reply. I am not able to get it to work though, I'm not very experienced with squarespace or CSS. I took a screenshot of the insert code, not sure if I have done it right.

I tried with and without my existing code, is this code meant to add to my existing code or to replace it?

Capture.JPG

Add it under current code then Apply > Check your site.

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
On 11/24/2020 at 8:18 PM, m_lundberg said:

I have added  it under the current code, unfortunately it still doesn't display the text under the picture.

Have you solved it yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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