Jump to content

How to disable mobile site on a specific webpage on a website?

Recommended Posts

Hi there everyone,

The mobile version of this site needs some fixes to the staff page, when accessing a lot of the pictures appear to just be missing or enlarged. Some of the text is not where it belongs either! If anybody could figure out a solution on how to fix this or just to disable the mobile version of this webpage completely I would appreciate it!

 

https://www.gracemedicalhome.org/staff

Link to comment
  • Replies 7
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

This is all how the blocks are arranged. You have a few sets of them with images on top of each other instead of image and text in a row. One of them has lots of images stacked and then a whole column of text stacked. You need to have them arranged just like the first few are set up.

Screenshot 2023-09-27 at 11.43.46 AM.png

Screenshot 2023-09-27 at 11.43.42 AM.png

Screenshot 2023-09-27 at 11.45.12 AM.png

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment
1 hour ago, VolunteerForGrad said:

Hi there everyone,

The mobile version of this site needs some fixes to the staff page, when accessing a lot of the pictures appear to just be missing or enlarged. Some of the text is not where it belongs either! If anybody could figure out a solution on how to fix this or just to disable the mobile version of this webpage completely I would appreciate it!

 

https://www.gracemedicalhome.org/staff

Disabling the whole page on mobile isn't a great idea but you could basically do the following.

/*Hide page on Mobile*/
@media (max-width: 768px) {
#collection-64b00dc163475c5fc2e28401 #siteWrapper{
 display: none!important; 
}
  body#collection-64b00dc163475c5fc2e28401::before {
    content: "This page is not viewable on mobile. Please view on a larger screen";
    position: absolute;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2rem;
}
}

This will hide the contents of the page and replace it with a message telling users to look on a larger screen.

It's very much a hacky placeholder, but it might be useful while you work out the rest.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
16 minutes ago, VolunteerForGrad said:

@KwameAndCo I know, but in the meantime we would still like the page to be viewable! Is there anyway there could be code written just for that page to not be in mobile view?

That's what the code I shared does. It'll only hide it on smaller (mobile screens).

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
16 minutes ago, VolunteerForGrad said:

@KwameAndCo I understand, but we would still like it viewable on mobile as well, just without it being in a mobile format for this specific page!

Ah sorry, I misread "disable mobile version of the page" as "disable the page on mobile".

Apologies.

You can't really do that - you have to use your own CSS to override it.

The issue however, is you've arranged your layout in 2 columns rather than rows - as shown in your images.

Hence it stacks like @jaeveedee said. You need to rearrange into rows and I don't have a video of this at the moment. Basically you need to go to desktop and drag the individual text blocks next to the corresponding image so that there is a little blue border between the two before you let go of the mouse button.

I suggest checkign this tutorial video as it's hard to explain without a visual.

 

It should help you and explain.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

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.