New to mobify studio. I am basic knowledge of HTML and CSS. Trying to create templates for each page on my site. I create template for a page grab existing elements and hardcode the HTML for others. I save the changes, Preview on a couple of devices then move to the next page. It seems that whenever I create a new template it saves over the HTML of the previous template. I can see each template, but in the HTML drop down I onnly have options for the last HTML, header, footer, and base. What am I doing wrong?
When you are creating a new template are you on the “Navigate” tab? If you are, that should create a new template, rather than over-writing the existing one. If the new template has been created correctly you should see it in the list of templates on the left in that “Navigate” tab.
Once the template has been created correctly you should be able to switch between templates on the HTML tab by selecting templates from the drop down (found next to the HTML drop down). Also, make sure that any template specific HTML changes are not done in the header, footer or base files. These files are used globally across all templates. Template specific HTML should be added only to the template HTML file.
If you’re still running into problems setting up the site, I would suggest checking out our Getting Started Guide. The guide includes a helpful video, and some great tips for setting up your site.
Hope this helps,
If you’re unable to select the correct elements using the interface, you can always update your selectors afterwards to make sure they’re returning the elements you need. For instance, if you selected the following in the interface:
Perhaps that’s a div that contains all of your navigation links. If you would like to select only the links themselves and not the outer container, you could update the text for the selector to be something like this:
Selector: “#my-Nav a”
That would return all link tags (<a>) within an element with the id=“my-Nav”.
By default we don’t include the desktop CSS on your mobile templates. We capture the stylesheet(s) in a global selector, but it’s not included on the page. So to answer your question Mobify’s CSS will take priority, mainly because your desktop CSS isn’t included on the mobile version of the page.