To hide code from mobile browsers:
- Now search for any inline CSS. This means HTML tags into which the depreciated "style" attribute has been inserted. They may look like this:
<p style="color: #FF0000; font-face: Arial;">Text impacted by style</p>
<p><style="color: #FF0000; font-face: Arial;">Text impacted by style</style></p>
- You should either remove the "style" attribute or replace it with a "class" attribute as described in the next step.
- If you want to use inline CSS in your product descriptions, use "class" to pull it from the mobile CSS file. For example:
<p class="redface">Text impacted by style</p>
(Where .redface is a style in the mobile CSS file)
You can create global styling rules for specific classes by editing your mobile_interface.css file.
To access this file, go to Design > File Editor in your Admin Area and click mobile_interface.css from the Shortcuts list on the right. Add styling changes as desired, making sure to click Save when finished.
We do not recommend editing your mobile CSS file unless you are an advanced user with coding knowledge.