Customize Blogger Mobile Theme

After selecting or having the desired theme for mobile, there are primarily two options to customize Mobile Theme - one using the Theme → Edit HTML option and another Theme → Customize (Especially Advanced → Add CSS → Add custom CSS). However, the added custom CSS using the later option will eventually go to the HTML which can be edited using the Edit HTML option. So prefer using the first option to do the customization as follows.

Go to Theme → Edit HTML under the CUSTOMISE button (at draft.blogger.com). Use Ctrl + F keyboard shortcut to find the CSS code for body.mobile as follows.

You can do a lot of customization in this CSS itself.

Next, open your website or blogger blog on Google Chrome Browser and follow the following steps.

1. Right-click on the page → Inspect (means open the DevTools)
2. Then use the Toggle device toolbar to select the mobile view
3. Then hit the refresh button of the browser to load the actual mobile view of your site.
4. Ensure the URL of your site is now changed to something like www.<your-site>.com/?m=1 where it ends with /?m=1

Next, select an element to inspect it using the arrow button just the left side of the Toggle device button as said above. And play around to find the desired target element to customize it using custom CSS as explained above.

Here, you can play with the following to find the desired element name and required style to apply.

1. The navigation bar of the elements to navigate to the target element's child or parent nodes. Sometimes the leaf or child level elements can't be used for your desired customization. There may be the parent element that will work. You have to do trial and error to get the right element that works.
2. Use the style tab to explore and try the styles you need on the selected element.
3. Especially try element. style option to find out or try out the custom CSS code you need.
4. And finally, you can copy the element name from the Properties tab to use the same in your Edit HTML work as said above.

Here is some sample customization that has been done in this way -

.mobile .footer-outer {
  border-top: none;
padding: 5px;
}

.mobile .blogger-iframe-colorize, .mobile .blogger-comment-from-post {
width: 95vw;
margin-left: -5px;
}

.mobile input.gsc-input {
    width: 60vw;
}