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

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

 

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

 

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

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

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

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

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

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

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

Create an account or sign in to comment

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

×
×
  • Create New...