How to turn off Desk Top webpages and only allow for Mobile Devices ONLY

Hello I plan to only use mobile sites including tablets… but NOT DeskTop LapTop pages… Is there an easy way to TURN OFF the initial webpage when ftping all pages up? confused …


Here is my public share link: [LINK][1]
([how to access public share link][2])

https://preview.webflow.com/preview/mywebapp123-ca710b9675d39fd8579d6e368b0?preview=06537a152b0a7f13439c0fc2026945cc

As far as i know theres no way to do that. Just design your site on the mobile media query only. No matter what you do, a version is always going to get loaded if someone goes to the URL from a desktop. Nothing you can do about that.

I added this to the head section… it did not work… did I do something wrong? thank you for any and all help… eager for your answer. bruceo

How about you just utilize the built in functionality within Webflow to show/hide a div on a per media query basis?

Put your entire site in a div with a class called “wrapper” or whatever, then just show/hide a message that says “hey, this site is for mobile devices only…” or whatever on desktop/tablet resolutions… Then only show your actual site content on the mobile device…

Webflow restricts some of the things you can do with the body tag, including the ability to set the visibility controls in the image attached. The workaround = wrapper div…

2 Likes

I am a bit confused as I have never done this before… Would you please be willing to make me a video of what exactly you want me to do and does this need to be repeated on EVERY page or only on the index? thank you … bruceo

I’ve put together a quick demo site for you using a free template. Just analyze how it was setup in the navigator & settings panels… Clone it, I’ll leave it up for a couple weeks before I delete it, so make sure you pull it into your own dashboard soon.

Clonable Site Link
Example Site (shrink your desktop browser window to see functionality…)

1 Like

Thank you for the demo site… I do see the div block for the entire index page… nice wrapper…

OK I am looking in settings and navigation and cannot find any place you added text that said Hello, this project…

Can you please please give me a clue as to where and how you placed that text on only the home page…

I have learned a lot in the last 3 months but you have me really stumped… thank you bruceo

OK I have figured out what must have been done… you added text into the white page and saved and published. … I originally thought there was a way to turn off the Home page visibilty. to solve all my problems.

I would appreciate your giving me instructions on adding text in a container and when clicking more info HIDDEN text would appear… and then clicking the same link it would close and hide…

Thank you for all of the help…

Here is a quick screencast that shows the setup. It’s easy to overlook the built-in functionality to show/hide any div, element, etc on a per media query basis by simply clicking on the settings tab (the cog icon, directly to the left of the navigator in the right side panel).

Open the Navigator panel to analyze the structure of the site. There are two main sections of content. A div with a class of message, and another div with a class of “site-wrapper”… Click on either one, then go to the settings for that particular div. You’ll notice the “Message” div is set to only show on the desktop & tablet resolutions. The “site-wrapper” div is set for the reverse - hidden on desktop/tablets & only shown on the two phone sized media queries.

You have this level of control over every single div, element, H1, on & on across your entire site. Here is another example of this functionality used on a custom built “Tabs to Accordion” setup. Basically it hides the default tabs widget on tablet/phones… and switches to a custom built accordion on the tablet/phones…

You don’t want to do this anyways from a usability standpoint. If someone accesses your thing from a desktop computer then take advantage of the fact that they are interested in your app/project/site, whatever it is… Telling them to simply visit your site on a smaller device is a gazillion times better than seeing nothing at all (such as a blank page…). If they are met with nothing, then your site is “broken” and “doesn’t even work” as far as they know…

Wow you are SO RIGHT!!! glad to be able to tell them to go see the site through the phone…

Also I am very very interested in the accordian thing that shows / hides text … IT DOES work in the mobile devices right ?
other wise you would have made that clear…

Oh here is a screen shot of the cloned site and maybe the reason I could not follow you because the text item was not in the navigator or I am not very good at clicking on it and having it show up??? please let me know if you can see it in the navigator… so I made my own text that works great…

thank you so much for the help… . and links etc…

NOt TEXT Site meant to say test site…

Eager to work on the info you just sent… Thank you for solving my issues…!!! Big Times

MoGeek, could you please look at my screenshot I uploaded with red text? I am wondering why I cannot locate anywhere a TEXT element on the clone … am I looking in the wrong place…? exactly where did you place the text? You sent me the nice video on where to look for it but on my clone version you sent it is not in there… if it is please tell me where to look for it. I was able to add my own text but was forced to HIDE it on the mobile devices… is that what needed to be done … text regarding that shows up on the WEB Browser for Desk Top… just want to know that I am doing this process correctly. Thank you… waiting for your reply… bruceo

Hi There,

Go back to the public/cloned page now. I don’t know why something didn’t carry over, but it seemed like the settings I had in place didn’t carry over. Weird…

I’ve just re-published the cloned link, and selected “Open in Webflow” from the public shared page. Everything looks good now, I’m uploading a screenshot of the navigator “tree structure” taken from the public share page below. It shows what I’ve explained above (two main divs - message in one, the whole website in another). The settings to show/hide per desktop/tablet/phones are configured for each main div on the “settings” tab directly to the left of the “navigator” tab (the cog icon)…

1 Like

Mogeek, received the new clone… now I see what you did… AWESOME… very very happy with your help… bruceo

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.