2 Column Mobile View

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 :)

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

 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!

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.

1 hour ago, tuanphan said:

Can you share page url? We can check easier.

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

12 hours ago, 325found said:

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

Answered in your own question.

do you have to make this possible?

On 10/17/2020 at 5:42 AM, tuanphan said:

Answered in your own question.

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

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?

Hi sorry for the late response, here are the pages: 

(we like the web view as is but the phone we would want it to be 2 or 3 times per row.)

https://shop325found.com/bath

https://shop325found.com/beauty

https://shop325found.com/bed

https://shop325found.com/clothing-accessories

https://shop325found.com/decor

https://shop325found.com/furniture

https://shop325found.com/gadgets-games

https://shop325found.com/kitchen

https://shop325found.com/pets

https://shop325found.com/halloween-decor

https://shop325found.com/annas-favorites

https://shop325found.com/gracies-favorites

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

That worked!! Would you be able to do it for our other pages?

I will list them here. THANKY YOU SO MUCH

https://shop325found.com/all-beauty

https://shop325found.com/all-bed

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

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

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

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>

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

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?  

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?

https://finn1pt.squarespace.com/hjem/sykkel

Password: access

On 11/18/2020 at 11:27 PM, m_lundberg said:

https://finn1pt.squarespace.com/hjem/sykkel

Password: access

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>

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?

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?

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

22 hours ago, tuanphan said:

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

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

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?

4 hours ago, tuanphan said:

Have you solved it yet?

Unfortnuately, I haven't been able to solve this problem.