Jump to content

Recommended Posts

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

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
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 comment
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?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 comment
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;
}
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 comment
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.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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 comment
  • 2 weeks later...
  • 2 weeks later...
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.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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???

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.