Disable mobile view completely

Site URL: https://www.maxwellflick.com

Hi,

For the most part I have been able to add squarespace custom css to give my site the look I want but I am completely stumped on this mobile view issue.

I want to have the content on mobile view look exactly like the content on the desktop version.

On the page https://www.maxwellflick.com/portraits the desktop view is perfect but switching over to mobile view it throws away the space blocks and jumbles together the images and text to display in a single column. Is there a code that exists to disable the mobile view and tablet view completely so that every format has exactly the same spacing? Essentially always forcing the desktop version to show?

I see a lot of posts from last year where there was apparently an option to change the mobile breakpoint to 0px but I don't have that option in my style editor.

site is private: flick2020

Thanks!

Some templates have the option to turn mobile off, home/design/template settings/disable mobile view. 

I am using York template which unfortunately does not have this option. I might just have to photoshop images and text together so they don't adjust in mobile. Very icky but it seems like the only option besides leaving squarespace altogether.

Hard to believe you can't make two or three images display side by side and retain sizes and spaces between them. If only it were that simple.

@tuanphan Any ideas on how to make all .sqs-block-image appear two side by side on mobile instead of stacked?

On 5/27/2020 at 6:08 AM, mflick said:

@tuanphan Any ideas on how to make all .sqs-block-image appear two side by side on mobile instead of stacked?

Depending. Can you share link to all pages you want side by side image block?

Any update on this? I really need to disable mobile view as well on my website!

For future comments, you can share site url & describe in detail. We can help easier.

https://lswtest.squarespace.com/ is my test site. I want to disable mobile and tablet view so only desktop view is available on all devices. Does that make it clear?

Still waiting on a response.

I used to solve a few cases where using CSS to resize certain elements width. However if you want this on entire site, it will be very time consuming.

If you only need it for header, footer or some other element, we can give the code

I have a similar question: How can I put blocks side by side on mobile only?

The one page on my site I would like to do this is on my "Projects" page. And would like this effect on mobile and ipad (i.e. two columns on mobile. I attached screenshot of what I'd like it to look like and included blocks so you can see its many blocks together.) Now on mobile it appears as one gigantic image and the text stacked. And I do not want to use the gallery blocks to achieve this because of their style. I'm happy with the site on desktop. 

I have about 30 blocks to organize on this "Projects" page but I am familiar enough with a bit of css / html that if someone can help me get started with just the code for 4 blocks (2 images, 2 text), I'm sure I can manage the rest. 

Better yet, I'd like to disable mobile view altogether (using Wells on 7.0).
Is it really not possible?  😭

Thanks very much for your help. 

On 12/18/2020 at 8:03 PM, mddiatta said:

I have a similar question: How can I put blocks side by side on mobile only?

The one page on my site I would like to do this is on my "Projects" page. And would like this effect on mobile and ipad (i.e. two columns on mobile. I attached screenshot of what I'd like it to look like and included blocks so you can see its many blocks together.) Now on mobile it appears as one gigantic image and the text stacked. And I do not want to use the gallery blocks to achieve this because of their style. I'm happy with the site on desktop. 

I have about 30 blocks to organize on this "Projects" page but I am familiar enough with a bit of css / html that if someone can help me get started with just the code for 4 blocks (2 images, 2 text), I'm sure I can manage the rest. 

Better yet, I'd like to disable mobile view altogether (using Wells on 7.0).
Is it really not possible?  😭

Thanks very much for your help. 

 

 

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2, div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2:nth-child(2n+1), div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2:nth-child(2n+1) {
    clear: left;
}
}

On 12/21/2020 at 8:14 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2, div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2:nth-child(2n+1), div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2:nth-child(2n+1) {
    clear: left;
}
}

 

@tuanphan thank you so much, you're a star. Unfortunately it's not working. I tried changing the blocks in the code but no luck.

best, myriam

On 12/26/2020 at 9:14 AM, mddiatta said:

@tuanphan thank you so much, you're a star. Unfortunately it's not working. I tried changing the blocks in the code but no luck.

 

best, myriam

Have you added code yet? I see it works here.

@tuanphan

happy new year 🙂

Yes! actually, it does work, not sure why I wasn't able to see it / make it work earlier. 

I do have a problem where just two blocks (four if you count the text blocks) aren't sitting side by side. I've screenshotted them here. 

On 1/24/2021 at 11:24 AM, mddiatta said:

@tuanphan

happy new year 🙂

Yes! actually, it does work, not sure why I wasn't able to see it / make it work earlier. 

I do have a problem where just two blocks (four if you count the text blocks) aren't sitting side by side. I've screenshotted them here. 

 

Hi. Sorry for the delay. I was off some day.

Do you still need help on this?

Thank you so much.

I do, I wasn't able to work it out myself. Could you please help me with this? 

On 01/02/2021 at 3:17 AM, tuanphan said:

Hi. Sorry for the delay. I was off some day.

Do you still need help on this?

HI, I got the same need about this and I got zero knowledge about CSS. I just grab code but I can't make it on my own. A small tutorial would be greatly appreciated... Thanks in advance 🙏 

On 2/2/2021 at 9:03 AM, mddiatta said:

Thank you so much.

I do, I wasn't able to work it out myself. Could you please help me with this? 

The url doesn't exist. https://www.maxwellflick.com/portraits

On 2/4/2021 at 5:12 AM, 3dmdesign said:

HI, I got the same need about this and I got zero knowledge about CSS. I just grab code but I can't make it on my own. A small tutorial would be greatly appreciated... Thanks in advance 🙏 

Can you share link to page where you have problem?

@tuanphan it looks like you are our helper 🙂

So I would like to remove from SERVICES page on a mobile version the block with the icons just bellow the header on my site https://pepper-plantain-fyd2.squarespace.com/config/ 

I tried with the custom code putting the 0% 

@media screen and (max-width: 640px) {.sqs-block-image{width:0%}}

but it does not work. 

Can you please help me.

Thank you

On 8/17/2021 at 4:14 AM, 2sillysocks said:

@tuanphan it looks like you are our helper 🙂

So I would like to remove from SERVICES page on a mobile version the block with the icons just bellow the header on my site https://pepper-plantain-fyd2.squarespace.com/config/ 

I tried with the custom code putting the 0% 

@media screen and (max-width: 640px) {.sqs-block-image{width:0%}}

but it does not work. 

Can you please help me.

Thank you

Hii. Your site is private. Can you setup password & Share url again? We can check easier

Hi @tuanphanthx for your reply, I managed to find a new section that fits and looks much much better, so I removed the picture block I mentioned from the page, so I would not need your help. 

Dear @tuanphan

I'm back to have a little of your help again if you're available. 

I'm working on the same site as in this thread: http://www.myriamdiatta.com/projects

In the grid of images and text on this page, I moved "thinking form" (top left) to the position it is now, and on mobile things have gotten skewed. On mobile I want the content to be a column of two. I did my best to read through the css you originally made for me, but i couldn't seem to work out what was this issue. 

Right now it looks like this: 

Here is the current code you made for me: 

/*TWO COLUMNS ON MOBILE VIEW PROJECTS PAGE*/////////

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2, div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2:nth-child(2n+1), div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2:nth-child(2n+1) {
    clear: left;
}
}
/* mobile 2 columns */
/* mobile 2 columns */
@media screen and (max-width:767px) {
div#page-5fc3c4c85147b14804a5f567 .span-8 .span-4 .span-2 {
    width: 50% !important;
    float: left !important;
}
  div#page-5fc3c4c85147b14804a5f567 .span-8 .span-4 .span-2:nth-child(2n+1) {
clear: left !important;
}  
}
 

On 3/2/2022 at 9:34 PM, mddiatta said:

Dear @tuanphan

I'm back to have a little of your help again if you're available. 

I'm working on the same site as in this thread: http://www.myriamdiatta.com/projects

In the grid of images and text on this page, I moved "thinking form" (top left) to the position it is now, and on mobile things have gotten skewed. On mobile I want the content to be a column of two. I did my best to read through the css you originally made for me, but i couldn't seem to work out what was this issue. 

Right now it looks like this: 

 

Here is the current code you made for me: 

/*TWO COLUMNS ON MOBILE VIEW PROJECTS PAGE*/////////

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2, div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1606665871851_4586+.row>.span-2:nth-child(2n+1), div#block-yui_3_17_2_1_1606665871851_4586~.row>.span-2:nth-child(2n+1) {
    clear: left;
}
}
/* mobile 2 columns */
/* mobile 2 columns */
@media screen and (max-width:767px) {
div#page-5fc3c4c85147b14804a5f567 .span-8 .span-4 .span-2 {
    width: 50% !important;
    float: left !important;
}
  div#page-5fc3c4c85147b14804a5f567 .span-8 .span-4 .span-2:nth-child(2n+1) {
clear: left !important;
}  
}
 

Hi,

Remove your code, it has some missing. Then let me know. I will check it again.

This week is a bit of a toothache, so reply is a bit slow.

Hello! 

Hope you're doing well. It's been a while, but I'd still love your help with this. 

I deleted the code as you suggested and it of course went back to one column in mobile view. http://www.myriamdiatta.com/projects 

Thank you!

Myriam