It has been a while since I added a Mobify page template so perhaps I missed a step. The problem is that the Mobify Studio preview displays correctly but the actual page on a mobile phone does not.
The online store generates dynamic pages but there are static pages for desktop visitors and inbound links.
Mobify code: added to header
Template directory: /anatomy/body/*
Can you provide any insight as to why the desktop page is showing instead of the Mobify mobile page?
Thanks in advance.
I’m a little unclear what the issue is
- is it that the page is falling through to the desktop view, or is it that it’s not displaying your stylesheet? It does appear to be showing the “adapted” mobile page, but the stylesheet is indeed not being used. What’s interesting for me is that the Mobify Studio preview displays this problem, but using my iPhone 5 I see the correct styles being rendered.
Can you tell me which device you’re using for testing? I’ll need to look into this a little further.
After taking a look at the CSS in use on the site, it looks as though there are several syntax errors present throughout the file. The reason this works on some browsers but not others is based entirely on browser compatibility and how it deals with CSS parsing errors. With that in mind, I recommend using a CSS Lint or validator utility on the web to verify your CSS markup for errors. A few examples are http://csslint.net/ and http://www.cssportal.com/css-validator/.
Here’s how you do that with your stylesheet:
1) Within the Mobify Studio interface, select the “CSS” tab in the top-left menu
2) Copy the contents within the editing pane
3) Paste the contents into the validator of your choice
The validator will present a list of the errors it found, so you can go through and resolve each. If you resolve all of the errors, you should find that the stylesheet will render properly. Let me know if you run into any problems!
Do you have access to edit the desktop environment? The reason you’re having issues submitting this form is due to the actual desktop markup — and how it interacts with the way Mobify.js captures your HTML. The form that is responsible for submitting a POST to the Cart Page is currently wrapped in a <table> element:
<form name="prodform" action="http://clinicalposters.com/cgi-bin/store/cart.cgi" method="POST">
which is what doesn’t work. To test this, I’ve locally edited the HTML structure so that it looks like this instead:<div class="noprint"> <form name="prodform" action="http://clinicalposters.com/cgi-bin/store/cart.cgi" method="POST"> <table>
The background behind this is that this is technically invalid markup; you are not allowed to have <form> elements as a child element of a <table>, <tr> or <td>. However, most modern browsers will fix this for you when they render the page. Unfortunately, because we need to capture the HTML so we can remix it via adaptive templating, the browser does not get a chance to do this. Let me know if you have any questions and if you’re able to modify this markup on desktop!
The wait time you’re experiencing after publishing your changes is due to caching on your device
- especially with changes to your CSS. That said, the cache control headers we set on files inside your bundle (JS, CSS, etc.) have a max-age of 300 seconds (i.e. 5 minutes). If you clear your device cache you should find that revisiting the website loads the new stylesheet.
As for the form, you are on the right track by including the entire form
- you’ll need to have the form, all required inputs, as well as all of the hidden inputs for this to work correctly. Currently, you aren’t including the form and some of the required inputs, which is why it isn’t submitting. However, you’ll find that once you do include it you’ll still have issues - this is related to the <form> element as a direct child of the <table> element. See my previous post about how to rectify that in the desktop markup first.
Sorry, are you saying that you were able to debug with Safari using iOS 6, but not with iOS 7? What operating system is your local development machine, Windows, or Mac OS X?
It looks like you also moved around the <form> and <table> elements? Glad to hear that everything worked and that you are confident using Mobify to power the mobile pages! Let me know if anything else comes up and I’ll be happy to help.