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

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

It looks like you solved this?

Posted Images

Recommended Posts

  • 0
On 12/3/2020 at 1:46 PM, m_lundberg said:

Unfortnuately, I haven't been able to solve this problem.

I'm still struggling with this one.. I've finally got a mobile inspector, but it still dosn't make sense to me. In the inspector I dechecked the margin-bottom for the blog post causing the gap (the first post is without a picture, see the attached image) it then appears as I want it to.

When I add the code: margin-bottom: 0% !imortant; to .summary-item, the text dissappears, but the text box is visible on the inspector (see image two).

Any ideas?

Untitled.png

IMG_4748.JPG

Link to post
  • 0
On 12/15/2020 at 5:17 PM, m_lundberg said:

I'm still struggling with this one.. I've finally got a mobile inspector, but it still dosn't make sense to me. In the inspector I dechecked the margin-bottom for the blog post causing the gap (the first post is without a picture, see the attached image) it then appears as I want it to.

When I add the code: margin-bottom: 0% !imortant; to .summary-item, the text dissappears, but the text box is visible on the inspector (see image two).

Any ideas?

Untitled.png

IMG_4748.JPG

Can you share page url? We can check easier

Link to post
  • 0
On 8/6/2020 at 2:54 PM, Cli said:

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

 

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 I was wondering if you could help me out, I'm looking to get the 3 pictures on my homepage to have two columns on mobile view. my website is https://www.designoutline.co.uk/ many thanks.

Link to post
  • 0
On 12/25/2020 at 5:57 AM, DannyB001 said:

 

Hi I was wondering if you could help me out, I'm looking to get the 3 pictures on my homepage to have two columns on mobile view. my website is https://www.designoutline.co.uk/ many thanks.

Add to Home > Design > custom CSS

@media screen and (max-width:767px) {
div#page-section-5fe1ffc576f612648cc6aa3f .span-12>.row>.span-4:not(:last-child) {
    width: 50% !important;
    float: left !important;
}
}

 

Link to post
  • 0
On 12/17/2020 at 11:15 PM, m_lundberg said:

I'm sorry, finn1pt.squarespace.com/hjem/crossfit

Password: access

Hi. I see 1 item only. Can you add some more items? We can code easier

Link to post
  • 0
On 1/2/2021 at 8:21 PM, m_lundberg said:

Hi, sorry I forgot about that.. I've added two more items now. 

Hi.

It looks like you solved this.

Link to post
  • 0
23 minutes ago, tuanphan said:

Hi.

It looks like you solved this.

Hi, I have not solved this. I want the gap between element 1 and 3 three to be smaler. The first picure is how it is now, and the second picture is how I want it to be.

1.JPG

2.JPG

Link to post
  • 0
On 1/5/2021 at 9:03 PM, m_lundberg said:

Hi, I have not solved this. I want the gap between element 1 and 3 three to be smaler. The first picure is how it is now, and the second picture is how I want it to be.

1.JPG

2.JPG

Add to Custom CSS

@media screen and (max-width:767px) {
.summary-item {
    margin-bottom: 0 !important;
}
}

 

Link to post
  • 0
51 minutes ago, tuanphan said:

Add to Custom CSS


@media screen and (max-width:767px) {
.summary-item {
    margin-bottom: 0 !important;
}
}

 

This was the original code I used, but using this code the text (title and tags) under disappears. I just realised, the text only disappears on iOS.. This is how it looks on iPhone:
 

Skjermbilde1.JPG

Link to post
  • 0
On 1/6/2021 at 10:11 AM, tuanphan said:

Add to Custom CSS


@media screen and (max-width:767px) {
.summary-item {
    margin-bottom: 0 !important;
}
}

 

@tuanphan could you please help me out with something similar? I have text blocks that are side by side on desktop but on mobile they are stacked on top of each other. The link to my website is https://theoptimisticpessimistic.com/. I have attached pictures of desktop view and mobile view to show you what I mean. 

Screen Shot 2021-01-07 at 9.30.14 PM.png

Screen Shot 2021-01-07 at 9.28.49 PM.png

Screen Shot 2021-01-07 at 9.28.56 PM.png

Link to post
  • 0
On 1/8/2021 at 9:35 AM, TheOP said:

@tuanphan could you please help me out with something similar? I have text blocks that are side by side on desktop but on mobile they are stacked on top of each other. The link to my website is https://theoptimisticpessimistic.com/. I have attached pictures of desktop view and mobile view to show you what I mean. 

Screen Shot 2021-01-07 at 9.30.14 PM.png

Screen Shot 2021-01-07 at 9.28.49 PM.png

Screen Shot 2021-01-07 at 9.28.56 PM.png

Answered your email.

Link to post
  • 0

Hello!

Same thing here.

I´ve added four logos side by side (above the footer) on the front-page on the site I'm building. 

On mobile, the logos appear in one row. This takes up a lot of space, and looks wired.

It would be great make them scale into a two column view on mobile.

I would appreciate if anyone could help me with this.

Site url: https://spinach-keyboard-w7ws.squarespace.com/

PW: hoyden2021

 

 

I´ve already added this code, to avoid the logos to become huge on mobile:

 

/* Forside entra logo max size */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1613136206283_10904 {
    width: 30% !important;
    margin: 0 auto;
}
}

/* Forside Oslo logo max size */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1613136206283_12139 {
    width: 30% !important;
    margin: 0 auto;
}
}

/* Forside Stastbygg logo max size */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1613136206283_13766 {
    width: 30% !important;
    margin: 0 auto;
}
}

/* Forside DNB logo max size */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1613136206283_15425 {
    width: 30% !important;
    margin: 0 auto;
}
}

Screenshot 2021-02-15 at 10.57.19.png

Screenshot 2021-02-15 at 10.58.01.png

Link to post
  • 0
On 2/15/2021 at 5:02 PM, Erlend-fs said:

Hello!

Same thing here.

I´ve added four logos side by side (above the footer) on the front-page on the site I'm building. 

On mobile, the logos appear in one row. This takes up a lot of space, and looks wired.

It would be great make them scale into a two column view on mobile.

I would appreciate if anyone could help me with this.

Site url: https://spinach-keyboard-w7ws.squarespace.com/

PW: hoyden2021

 

 

I´ve already added this code, to avoid the logos to become huge on mobile:

 

/* Forside entra logo max size */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1613136206283_10904 {
    width: 30% !important;
    margin: 0 auto;
}
}

/* Forside Oslo logo max size */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1613136206283_12139 {
    width: 30% !important;
    margin: 0 auto;
}
}

/* Forside Stastbygg logo max size */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1613136206283_13766 {
    width: 30% !important;
    margin: 0 auto;
}
}

/* Forside DNB logo max size */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1613136206283_15425 {
    width: 30% !important;
    margin: 0 auto;
}
}

Screenshot 2021-02-15 at 10.57.19.png

Screenshot 2021-02-15 at 10.58.01.png

Hi. It looks like you solved this?

Link to post
  • 0
On 3/1/2021 at 11:40 PM, MartinMurray said:

Hi All 
I'm having some problems finding the right code for this as well - baffled me for a few days now.
I have a few hubs running, and having 2 column on images would really help reduce page hight on Mob 

 

https://www.autotraderdiscover.co.uk/ds7-crossback

Screen Shot 2021-03-01 at 16.38.33.png

It looks like you solved this?

Link to post
  • 0

I would also LOVE to do this on the home page of my site, we're we have a 6 column row. On mobile, I would love to have it in 2 or 3 columns (instead of the default single column).

My website is: https://echidna-garlic-hbhz.squarespace.com/home

I've been trying to use the code you were using further up, but I guess I might not be getting the 'identifier' correct that's before the adjustment.... Any help would be GREATLY appreciated... THANK YOU!

Link to post
  • 0
On 3/5/2021 at 10:08 PM, CallieR said:

I still haven't solved this issue... is there any chance I could get some help??

On mobile, instead of having these be in a single column, I would very much like for them to be in 2 columns. 

https://echidna-garlic-hbhz.squarespace.com/home

Pass: Downtown202GRIT

Help!! 🙂 Thank you for considering...

Screen Shot 2021-03-05 at 9.08.24 AM.png

Hi. It looks like you solved this?

image.thumb.png.dc3457cc7e21363047d94814fe8dca97.png

Link to post
  • 0
On 3/31/2021 at 10:12 AM, bullethorse said:

Would someone be able to help me get my page to appear like the screenshot provided on mobile? It is perfect on desktop, however, the mobile version just stacks all the content instead of displaying it in 2 columns.

@tuanphan

Thanks!

http://bullethorseracing.com/template2

2018575171_Screenshot2021-03-309_19_31PM.thumb.png.d936dbecf3c334bf557ea21ac93a58f5.png

Hi. The url doesn't exist. Can you check it again?

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