2 Column Mobile View

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.

Add to Home >Design > Custom CSS

@media screen and (max-width:767px) {
div#block-5ebcc01d7f154626731f3287+.row>.col {
    float: left !important;
    width: 50% !important;
}
div#block-5ebcc01d7f154626731f3287+.row>.col:nth-child(2n+1) {
    clear: left;
}
}

On 5/15/2020 at 2:57 PM, tuanphan said:

Add to Home >Design > Custom CSS

@media screen and (max-width:767px) {
div#block-5ebcc01d7f154626731f3287+.row>.col {
    float: left !important;
    width: 50% !important;
}
div#block-5ebcc01d7f154626731f3287+.row>.col:nth-child(2n+1) {
    clear: left;
}
}

 

Hi there,

I was wondering if you could help me with a similar issue I'm having with a logo block on a WIP site I'm doing for a client. Squarespace URL: https://trout-raspberry-m87k.squarespace.com/about-us.

I would ideally like to be able to ensure that the logos (Our Partners) are displayed in two rather than one column on mobile to save real estate but have tried the above after tweaking but can't get it to work.

Any help would be hugely appreciated!

8 minutes ago, Cli said:

Hi there,

I was wondering if you could help me with a similar issue I'm having with a logo block on a WIP site I'm doing for a client. Squarespace URL: https://trout-raspberry-m87k.squarespace.com/about-us.

I would ideally like to be able to ensure that the logos (Our Partners) are displayed in two rather than one column on mobile to save real estate but have tried the above after tweaking but can't get it to work.

Any help would be hugely appreciated!

What is access password?

I don't think there's a password protection on there as I disabled to share with the client earlier today

12 minutes ago, Cli said:

I don't think there's a password protection on there as I disabled to share with the client earlier today

3 minutes ago, tuanphan said:

How strange. I definitely disabled the password and is not showing on my side. https://trout-raspberry-m87k.squarespace.com/about-us

You need to adjust layout a bit.

First add 4 logos: BBC, Endemo.., Fremantle, Netflix

Next add Line Block

Next add Sky, WaltDisney, WP, Youtube

Next add Line Block

Next add AE, VIACOMBCS, Itv, Studio

Then remove 2 Line Blocks

Then share url again. I will give the code to make 2 logos/row on mobile

21 hours ago, tuanphan said:

You need to adjust layout a bit.

First add 4 logos: BBC, Endemo.., Fremantle, Netflix

Next add Line Block

Next add Sky, WaltDisney, WP, Youtube

Next add Line Block

Next add AE, VIACOMBCS, Itv, Studio

Then remove 2 Line Blocks

Then share url again. I will give the code to make 2 logos/row on mobile

Thanks so much @tuanphan, that's all done now on the same link: https://trout-raspberry-m87k.squarespace.com/about-us

On 8/6/2020 at 9:11 PM, Cli said:

Thanks so much @tuanphan, that's all done now on the same link: https://trout-raspberry-m87k.squarespace.com/about-us

Add to Home > Design > Custom CSS

/* 2 columns logos */
@media screen and (max-width:767px) {
div#page-section-5f0c52af60bdf3313368b3fd .span-12 {
.span-3 {
    width: 50% !important;
    float: left !important;
}
.span-3:nth-child(2n+1) {
    clear: left !important;
}
}
}

@tuanphan hi there! could you help me with a similar problem? i also want to display 2 columns on my mobile version of the 'Our Services' section. this is the link to my site: truemedical.sg. i am not sure how to replace the block IDs in your answer above.

On 8/7/2020 at 3:14 PM, tuanphan said:

Add to Home > Design > Custom CSS

/* 2 columns logos */
@media screen and (max-width:767px) {
div#page-section-5f0c52af60bdf3313368b3fd .span-12 {
.span-3 {
    width: 50% !important;
    float: left !important;
}
.span-3:nth-child(2n+1) {
    clear: left !important;
}
}
}

 

Oh my God! You're a genius! Thank you so much! That works perfectly! really, really appreciate your help with this! 

On 8/10/2020 at 2:40 PM, pottedplant77 said:

@tuanphan hi there! could you help me with a similar problem? i also want to display 2 columns on my mobile version of the 'Our Services' section. this is the link to my site: truemedical.sg. i am not sure how to replace the block IDs in your answer above.

Difficult. If you can convert (text + image, eg: first icon + keep track of your...) to image block or summary block, it will be easier.

On 5/15/2020 at 2:57 PM, tuanphan said:

Add to Home >Design > Custom CSS

@media screen and (max-width:767px) {
div#block-5ebcc01d7f154626731f3287+.row>.col {
    float: left !important;
    width: 50% !important;
}
div#block-5ebcc01d7f154626731f3287+.row>.col:nth-child(2n+1) {
    clear: left;
}
}

 

Do you know how i could this for my products page too?

On 8/14/2020 at 5:03 AM, pinkelephantclothes said:

Do you know how i could this for my products page too?

Can you share link to product page?

I have a follow-up, is there a code that can apply the two-grid layout on mobile site-wide in relation to Summary Block Grid layout?

58 minutes ago, Anthony_Richardson said:

I have a follow-up, is there a code that can apply the two-grid layout on mobile site-wide in relation to Summary Block Grid layout?

Can you share link to page where you use Summary Block Grid? We can check easier.

11 minutes ago, tuanphan said:

Can you share link to page where you use Summary Block Grid? We can check easier.

www.thedesignemotive.com/testing-something-here

Hi there!

I've also tried to use your code to try and set my logos in a 2 column mobile responsive design but `i keep getting a syntax error on the 1st line of code. 

Could you help with mine please? 

The website is https://www.browologylabs.com/ and its this block that I'd like to have the icons in two columns.

Could you help me here. Thank you and much appreciated 

On 9/4/2020 at 2:52 PM, Anthony_Richardson said:

I have a follow-up, is there a code that can apply the two-grid layout on mobile site-wide in relation to Summary Block Grid layout?

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

On 9/10/2020 at 11:44 PM, Browology said:

Hi there!

I've also tried to use your code to try and set my logos in a 2 column mobile responsive design but `i keep getting a syntax error on the 1st line of code. 

Could you help with mine please? 

The website is https://www.browologylabs.com/ and its this block that I'd like to have the icons in two columns.

Could you help me here. Thank you and much appreciated 

 

I think I sent code for this question, in another post or email???

Hey @tuanphan

I would also love some help, my client wants me to display 2 columns on mobile on every project / work page.

Here'a an example page:

https://oriole-grasshopper-yxhx.squarespace.com/lululemon-roksanda

P: Remi2020

Would you possibly be able to help me at all with what to pop into the header section on each page please?

I'm happy to update the YUI code etc per page as needed.

Also, aware I might need to update the layouts, so text and image sit under each other, rather than next to each other.

Thank you in advance 🙂

Ryan


 

6 hours ago, ryanspacey said:

Hey @tuanphan
 

I see 2 images/row here. Do you still need help on this?

On 9/19/2020 at 5:01 PM, tuanphan said:

I see 2 images/row here. Do you still need help on this?

Hello, thanks for the reply.

Yes please, I'm looking at mobile view rather than DT and keeping two columns (rather than default one column view).

is this easy enough to achieve?

Thank you!

On 9/24/2020 at 6:25 PM, ryanspacey said:

Hello, thanks for the reply.

Yes please, I'm looking at mobile view rather than DT and keeping two columns (rather than default one column view).

is this easy enough to achieve?

Thank you!

I meant I see 2 images/row on mobile here. You want 1/row or???

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 🙂