Disable viewing experience builder site on medium and small devices

1671
6
Jump to solution
07-07-2021 07:59 AM
by Anonymous User
Not applicable

Hi,

Do you know a clever to disable the view of a site, created with experience builder, on medium and small screens? What I am trying to do is making the site solely viewable by desktop computers and not on smaller screen handheld devices, since the experience becomes to clumsy and messy. I am imagining something like a box saying that: "This site has not been configured to be accessed on small screen devices....."   

Cheers

1 Solution

Accepted Solutions
jcarlson
MVP Esteemed Contributor

Should be simple enough. When you have the medium and small views active, you can see a little selector to switch between Auto and Custom. Switch it to Custom.

jcarlson_0-1625670301890.png

 

Once you've done that, move all the widgets to Pending. Do not delete them as that will remove the widgets from the Experience entirely, even from the full screen view.

jcarlson_1-1625670312484.png

Now insert a new Text widget that has the message you want. This is a great place to use the VW font size setting, as your font will adapt to the screen size that way. Set the size of the text box to auto, and center it in the page.

jcarlson_2-1625670470080.png

That takes care of one of the small views. Go into whichever view you haven't yet configured. Again set the layout to custom and move the widgets all to pending.

If you go to the Pending list, you'll see the text box you just created is in there. Go ahead and move it into this view, too. You'll have to re-configure the alignment and size.

 

That's it! If you use headers and footers, you may need to set those to Custom as well and adjust as needed.

Here's my Experience, being previewed on a landscape mobile view.

jcarlson_3-1625670709876.png

 

- Josh Carlson
Kendall County GIS

View solution in original post

6 Replies
jcarlson
MVP Esteemed Contributor

Should be simple enough. When you have the medium and small views active, you can see a little selector to switch between Auto and Custom. Switch it to Custom.

jcarlson_0-1625670301890.png

 

Once you've done that, move all the widgets to Pending. Do not delete them as that will remove the widgets from the Experience entirely, even from the full screen view.

jcarlson_1-1625670312484.png

Now insert a new Text widget that has the message you want. This is a great place to use the VW font size setting, as your font will adapt to the screen size that way. Set the size of the text box to auto, and center it in the page.

jcarlson_2-1625670470080.png

That takes care of one of the small views. Go into whichever view you haven't yet configured. Again set the layout to custom and move the widgets all to pending.

If you go to the Pending list, you'll see the text box you just created is in there. Go ahead and move it into this view, too. You'll have to re-configure the alignment and size.

 

That's it! If you use headers and footers, you may need to set those to Custom as well and adjust as needed.

Here's my Experience, being previewed on a landscape mobile view.

jcarlson_3-1625670709876.png

 

- Josh Carlson
Kendall County GIS
by Anonymous User
Not applicable

Yep @jcarlson,

This works brilliantly, thanks!
Though, I have this splash screen that still appears at every screen size level, which would also be nice to have disabled, once you try navigating to the site on medium and small screen devices. Maybe you have an idea or perhaps this is a completely new forum question.

- Andreas
Nukissiorfiit Greenland

0 Kudos
jcarlson
MVP Esteemed Contributor

Splash screens and other windows can also have a custom layout setting. Just repeat those same steps, but with the window selected in the table of contents. You can't change the window's settings without affecting the full-screen view, but you can change the contents of the splash screen to display a duplicate "sorry" message as the page underneath.

jcarlson_0-1625678189375.png

 

- Josh Carlson
Kendall County GIS
0 Kudos
by Anonymous User
Not applicable

Perfect.
That also it remedied that problem!

Thanks a lot @jcarlson 

0 Kudos
JonathanMcDougall
Occasional Contributor III

@Anonymous User 

Hi, I don't know the answer, but really would like to know this too. I usually develop for a desktop environment, however, just completed my first "mobile only" exp and someone tried to load it on a desktop.

0 Kudos
JonathanMcDougall
Occasional Contributor III

@Anonymous User 

@jcarlson 

Ha, I've no idea why I didn't think of this given it was staring me in the face as I dev across devices! Thank you for blowing away the brain fog!