Mobile Homepage vs. Desktop Homepage
Your SNO site is completely mobile responsive and will automatically adjust to the size of the device being used to view the site, but you do have the ability to customize what's seen on mobile versus what's seen on your desktop.
There are two ways to vary how your mobile homepage appears.
Option 1: Mobile Homepage Customization
The Widget Area Designer (found within the Site Designer tab on the SNO Design Options Page) provides an option to hide a widget area on mobile screens that are less than 600 pixels wide.
To take advantage of this option, click on the gear icon in the top left corner of a widget area and then click “Hide Widget Area on Mobile Displays.” If you are looking to create a simpler display on mobile, this is how to do it.
With FLEX Pro, you can also create different versions of your website’s header and footer that are optimized for tablet or mobile devices. Instructions on designing those can be found here.
Option 2: Using the Mobile Widget Area
To vary how your mobile homepage appears, you can also use the Mobile Homepage Widget Area.
You can activate this widget area by going to Appearance -> SNO Design Options -> Appearance -> Set the Mobile Widget Area to “Active."
Once you have activated this widget area, it can be found and altered under Appearance -> Widgets in your Widget Control Panel. It works just like any other widget area, by dragging and dropping your chosen widgets into it and saves automatically.
Keep in mind that when you add a widget to this widget area, it immediately replaces your default homepage when viewed on a mobile or tablet device. This means that if you mistakenly add a blank widget to the Mobile Homepage widget area, then you'll have a blank screen on a mobile device when viewing your site. In other words, be intentional when using this feature.
Mobile Menu
The menu on your mobile view will be indicated as a Menu-Hamburger element in the site designer when you select the Header Design- Mobile option.
The content will load one of your existing menus by default. To ensure it displays the content from your top navigation menu on the desktop click the gear icon on the Menu-Hamburger element, and select the appropriate menu from the first dropdown. Within those settings you can also adjust the design of the mobile menu.
You also have the option to create a new, mobile specific menu, and set the Menu-Hamburger element to display that if you choose. For more information on creating navigation menus refer to this support article.