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

  • 0
On 5/14/2021 at 6:41 PM, dabrennn said:

Hello! I would like my page to display products in 2 columns for mobile view as well. I tried this but didn't work. Can you advise please?

My page: https://kpo.squarespace.com/mains 

I would like to replicate for all the pages, if you could advise what to change for each page it would be greatly appreciated. Thanks in advance! 

2 columns is complex. If you want 3 columns, we can give the code

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/16/2021 at 6:38 PM, dabrennn said:

3 columns is great too! Greatly appreciate your help. 

Try adding to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
div#page-section-5eeb85d90815ef5c6d46ba66 .span-4 {
    width: 33.333% !important;
    float: left !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/18/2021 at 10:48 AM, tuanphan said:

Try adding to Design > Custom CSS


/* Mobile */
@media screen and (max-width:767px) {
div#page-section-5eeb85d90815ef5c6d46ba66 .span-4 {
    width: 33.333% !important;
    float: left !important;
}
}

 

Thank you, this works! Am I right that for this to apply to other pages, I just need to change the section id? 

Link to comment
  • 0
3 hours ago, dabrennn said:

Thank you, this works! Am I right that for this to apply to other pages, I just need to change the section id? 

You can replace div#page.. with data section id. Use this tool to find data section id. 

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/25/2021 at 10:20 AM, dabrennn said:

Sorry, I also have a summary block at the bottom of the page - is that possible for that to be 2 columns? 

Hi. You mean Checkout these deals & ?

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/26/2021 at 5:06 PM, tuanphan said:

Hi. You mean Checkout these deals & ?

 

Hi, yes that's right.

For another page, I replaced the data section id but not showing up. Is this right?

/* Mobile */
@media screen and (max-width:767px) {
div#page-section-609e37d803e9bd247c33214e .span-4 {
    width: 33.333% !important;
    float: left !important;
}
}

The page is https://kpo.com.sg/whisky 

Thanks! 

Link to comment
  • 0
23 hours ago, dabrennn said:

Hi, yes that's right.

For another page, I replaced the data section id but not showing up. Is this right?


/* Mobile */
@media screen and (max-width:767px) {
div#page-section-609e37d803e9bd247c33214e .span-4 {
    width: 33.333% !important;
    float: left !important;
}
}

The page is https://kpo.com.sg/whisky 

Thanks! 

Add to Design > Custom CSS

/* Mobile-Whisky 2 columns */
@media screen and (max-width:767px) {
div#page-section-609e37d803e9bd247c33214e .span-3, div#page-section-609e37d803e9bd247c33214c .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-609e37d803e9bd247c33214e .span-3:nth-child(2n+1), div#page-section-609e37d803e9bd247c33214c .span-3:nth-child(2n+1) {
    clear: left !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

 

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

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

Hello Dear Tuanphan,
I would like to know if it is possible to put 4 texts columns on mobile side by side ?
I've done a "sheet" for price on desktop with 4 columns, and it just doesn't work at all on mobile version

Thank you so much for your help

Capture d’écran 2021-09-27 à 16.43.57.png

Link to comment
  • 0
On 9/27/2021 at 9:56 PM, Oceane said:

 

Hello Dear Tuanphan,
I would like to know if it is possible to put 4 texts columns on mobile side by side ?
I've done a "sheet" for price on desktop with 4 columns, and it just doesn't work at all on mobile version

Thank you so much for your help

Capture d’écran 2021-09-27 à 16.43.57.png

Can you share link to page in screenshot? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Hello Everyone,

I know my needed answer is here but I could not figure out how to apply it. I am having difficulty finding the id in this code:

61664c437456c9037969db05

Can anyone help me how to apply the code for my website

https://www.xystema.com/

the site password is 0612

on the partners logo. I wanted to have a 2 columns on mobile instead of one column.

I will appreciate any help from you Guys. Thank you very much!

Ciodensky

Edited by Ciodensky
provide the site password
Link to comment
  • 0
On 10/16/2021 at 7:00 AM, Ciodensky said:

Hello Everyone,

I know my needed answer is here but I could not figure out how to apply it. I am having difficulty finding the id in this code:

61664c437456c9037969db05

Can anyone help me how to apply the code for my website

https://www.xystema.com/

the site password is 0612

on the partners logo. I wanted to have a 2 columns on mobile instead of one column.

I will appreciate any help from you Guys. Thank you very much!

Ciodensky

Try 

@media only screen and (max-width: 767px) {
	#block-yui_3_17_2_1_1634259163197_28878 + .row > .col {
		width: 50% !important;
		display: inline-block;
	}

	#block-yui_3_17_2_1_1634259163197_28878 + .row .col >.image-block {
		width: 100% !important;
	}
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 10/16/2021 at 7:00 AM, Ciodensky said:

Hello Everyone,

I know my needed answer is here but I could not figure out how to apply it. I am having difficulty finding the id in this code:

61664c437456c9037969db05

Can anyone help me how to apply the code for my website

https://www.xystema.com/

the site password is 0612

on the partners logo. I wanted to have a 2 columns on mobile instead of one column.

I will appreciate any help from you Guys. Thank you very much!

Ciodensky

My testing result after applying Custom Css

image.png.74968d65891641f4eec25e92715a7433.png

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
23 minutes ago, jwenczel said:

Can someone help me get my products in two columns for mobile view?  I've tried all of the variations above but nothing seems to be working. It would be MUCH MUCH appreciated!  @tuanphan

https://www.thatswhatshefednofo.com/breakfast

You can try 

@media only screen and (max-width: 767px) {
  section[data-section-id="616b809c95a9836cc81cc293"] .summary-item {
    width: 45% !important;
  }

  section[data-section-id="616b809c95a9836cc81cc293"] .summary-item img {
    width: 100% !important;
  }
}

Support me by pressing 👍 if this useful for you

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
On 10/17/2021 at 10:24 PM, bangank36 said:

Try 

@media only screen and (max-width: 767px) {
	#block-yui_3_17_2_1_1634259163197_28878 + .row > .col {
		width: 50% !important;
		display: inline-block;
	}

	#block-yui_3_17_2_1_1634259163197_28878 + .row .col >.image-block {
		width: 100% !important;
	}
}

 

Hi Bangank36,

Same with this one (I made some changes today), I tried using the block id at chrome extension on the logo QuickBooks but it seems is not working. I think something is wrong with my id.

Can assist one more time. Where the block id you are getting?

Thank you very much.

Link to comment
  • 0

@Ciodensky Add to Design > Custom CSS > Then save & reload the site

/* Breakfast 2 columns mobile */
@media screen and (max-width:767px) {
div#block-4880c51da402547b60ba .summary-item {
    width: calc(~"50% - 10px") !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 10/20/2021 at 8:54 PM, tuanphan said:

@Ciodensky Add to Design > Custom CSS > Then save & reload the site

/* Breakfast 2 columns mobile */
@media screen and (max-width:767px) {
div#block-4880c51da402547b60ba .summary-item {
    width: calc(~"50% - 10px") !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}
}

 

Hi Tuanphan,

Sorry but I really have poor coding skills. I couldn't find or reconcile your sample code with my website. I did not use the .summary-item actually. I you can check my web and inspect, can you give me the code so I could paste it.

my web: https://www.xystema.com

password: 0612

Many many thanks.

Link to comment
  • 0
On 10/22/2021 at 7:56 AM, Ciodensky said:

Hi Tuanphan,

Sorry but I really have poor coding skills. I couldn't find or reconcile your sample code with my website. I did not use the .summary-item actually. I you can check my web and inspect, can you give me the code so I could paste it.

my web: https://www.xystema.com

password: 0612

Many many thanks.

ah, missing your question with another member site. You mean Partner Logos in 2 columns?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
5 hours ago, tuanphan said:

ah, missing your question with another member site. You mean Partner Logos in 2 columns?

Yes. I was able to inject the code below but here's the result looks weird.

The shopify below went too low. And, I would like to make the 2 column logos centered horizontally.

Appreciate your help very much.

Screen Shot 2021-10-25 at 4.16.13 PM.png

Screen Shot 2021-10-25 at 4.17.12 PM.png

Link to comment
  • 0
On 10/25/2021 at 3:19 PM, Ciodensky said:

Yes. I was able to inject the code below but here's the result looks weird.

The shopify below went too low. And, I would like to make the 2 column logos centered horizontally.

Appreciate your help very much.

Screen Shot 2021-10-25 at 4.16.13 PM.png

Screen Shot 2021-10-25 at 4.17.12 PM.png

It looks like you used a lot of code to change image width on mobile. Can you remove all? I will check & give the code

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 10/27/2021 at 6:03 PM, tuanphan said:

It looks like you used a lot of code to change image width on mobile. Can you remove all? I will check & give the code

 

Hi Tuanphan, as requested, I already remove all the code related to partner images. Thank you in advance.

Link to comment
  • 0
On 10/25/2021 at 3:19 PM, Ciodensky said:

Yes. I was able to inject the code below but here's the result looks weird.

The shopify below went too low. And, I would like to make the 2 column logos centered horizontally.

Appreciate your help very much.

Screen Shot 2021-10-25 at 4.16.13 PM.png

Screen Shot 2021-10-25 at 4.17.12 PM.png

Can you check password? It is incorrect

my web: https://www.xystema.com

password: 0612

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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