If your site is build vastly on weebly’s tools and without much custom HTML, jQuery plugins and JavaScript, which I guess accounts to the majority of sites build with weebly, then you won’t probably need to alter the CSS and look of your site’s generated mobile version. But if you do need to make CSS adjustments, then you will realize that is not as easy as you might initially think. It is actually far from straight forward and even weebly’s support won’t probably be of any help. This happens, because weebly takes whatever you have built and creates almost a new site for the mobile devices. It changes the initial CSS and even the HTML of each page, leaving you no place to write instructions that will be safely transferred to the mobile version. You can try and add CSS rules in the main-style.css or other stylesheets, but you won’t see them pass to the mobile version. Of course, you can always turn the mobile version off in the settings and additionally, the end users always get an option to see the non-mobile version of the site. But it will be such a petty, since the mobile version looks much better in mobiles and is usually pretty close to what we want. Why let few CSS rules and little imperfections ruin it? It turns out that don’t have to be that way and what follows are instructions on how to change the mobile version’s CSS.
Step 1: Where to put the CSS rules?
Step 2: Make the rules mobile only
Step 3: Add the JavaScript
if (!$("#navigation").length) {
// Add here CSS rules for the mob version
// Example rule: make code blocks' font extra small
// for fitting better in the small screens
$("pre.prettyprint").css({fontSize: "55%", padding: "10px 5px"});
} else {
// Optionally, add here rules you want to force for the PC version
}