Mobilize Your Website!
Topic: Builder Updates
You can now make your website compatible with your mobile device all with the simple click of one button.
Here are step-by-step instructions on how to turn on your mobile layout and how to customize what shows up on your site when you view it on a mobile device.
Step 1:
Make sure that you have Mobile Layout enabled.
To do this, go to your Site tab and click "Turn On Mobile Layout" under Site Settings. To make sure it works, you must click SAVE! Note: You will notice that if you have a free account, this option is not currently available.
Step 2:
Create your site! Once you're done filling your website with all the content you want and with all the add-ons you need, click "Preview" and then select "Mobile Preview" to see how your website will look on a mobile screen.
Step 3:
Once you have seen the preview of your mobile site, you can go back to your editor and make any changes you need. If there are images or modules that you do not want to appear on your mobile website you can click on the cog of that module and uncheck the box "Display in Mobile Version."
Step 4:
Click publish to make sure others will view this version of your site when they visit on a mobile device.
Custom Style Tips:
If you built custom CSS into your style, you must make sure that your CSS for the mobile layout matches the CSS for your website. For example, if you changed the background image of your website, if you don't change the background image in your mobile layout CSS, your mobile version will show up as the original style.
To check and edit your website's CSS, view the CSS editor in Source View and scroll all the way to the bottom. If you have simple changes to make, easily edit the mobile CSS under "MOBILE LAYOUT" to what you need it to be to match your normal website. If you are not seeing this CSS at the bottom of your code, you can add in the code below and customize it to your liking. See the code below:
______________________________________________________________________________ */
@media screen and (max-device-width:480px), screen and (max-width:600px){
/* adds mobile only background */
#body.mobileLayout{}
/* style for menu button at top right of page */
#body.mobileLayout #mNavLink{}
/* styling for navigation menu to be placed at bottom of page */
#body.mobileLayout .mobileNav ul{}
#body.mobileLayout .mobileNav ul li a{}
#body.mobileLayout .mobileNav ul li a:hover,
#body.mobileLayout .mobileNav ul li a.selected{}
/* mobile layout/content styling */
#body.mobileLayout #outerContainer{}
#body.mobileLayout #header{}
#body.mobileLayout #main{}
#body.mobileLayout #content{}
#body.mobileLayout #sidebar{}
#body.mobileLayout #footer{}
}
Fill in all of these sections with the elements that you need to match your custom site and you'll be all set!
Posted by team-blog
at 12:01 AM PST
Updated: Monday, January 16, 2012 1:25 PM PST
We have released an update for the Custom HTML add-on! Before, the add-on was overzelous in cleaning your HTML input, causing many add-ons to appear blank when published. The cleaning was good up to a point. It cleaned up your code and helped make sure that if you wrote basic code yourself, it didn't break. However, it wasn't ideal for 3rd party code as it would tend to take out elements that were necessary to publish correctly.