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

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 post
  • Answers 47
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

Recommended Posts

  • 0

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
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!

Link to post
  • 0
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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
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

Edited by Cli
Link to post
  • 0
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;
}
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

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

Link to post
  • 0
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! 

Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0
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?

Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

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 

Screenshot 2020-09-10 at 17.41.10.png

Link to post
  • 0
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???

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

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


 

Link to post
  • 0
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!

Link to post
  • 0
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???

image.thumb.png.b9e19846ea86eedfa733d027733fbd0f.png

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I'm seriously sick. Off some time.

Link to post
  • 0

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 🙂

Link to post
  • 0

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

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...