Page ignoring style

Kevin May 26, 2014 06:09PM PDT

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/*
Example: clinicalposters.com/anatomy/body/397.html

Can you provide any insight as to why the desktop page is showing instead of the Mobify mobile page?

Thanks in advance.

Up 4 rated Down
Michael May 27, 2014 04:58PM PDT Mobify Agent

Hi there,

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.

Best,
Michael

Up 0 rated Down
Michael May 27, 2014 05:14PM PDT Mobify Agent

Hi there,

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!

Thanks,
Michael

Up 1 rated Down
Kevin May 27, 2014 06:35PM PDT
Perhaps it was a caching issue. Yesterday the mobile formatted page would not display. Today it does. Thanks for the link to the CSS validator. The desktop-specific CSS such as "active" and "focus" states were unnecessary.

One issue remains now that the mobile page is visible. The "add to cart" button is inactive. Does this have something to do with "post" vs "submit" on mobile devices? If so, how do I globally override it for Mobify so the product page item can be added?
Up 1 rated Down
Michael May 28, 2014 06:46PM PDT Mobify Agent

Hi Kevin,

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:
<div class="noprint">
<table>
<form name="prodform" action="http://clinicalposters.com/cgi-bin/store/cart.cgi" method="POST">

</form> </table> </div>

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>


</table> </form> </div>

and it works properly on the mobile site. Can you possibly give that a try? If you’re unable to, then I can work on providing you the steps necessary to do this via Javascript, but that’s a little more complex than changing the markup itself.

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!

Thanks,
Michael

Up -1 rated Down
Kevin May 29, 2014 05:50AM PDT
Thanks for your insights, Michael. Yes, I can edit the desktop environment (Perl generating static pages). The TABLE and FORM have been nested within the DIV tags. The original issue of mobile pages not displaying within Safari on my iPhone 5s (iOS 7) popped up again yesterday. I had to wait a day to see the results. Now that I see it, the "Add to Cart" button is still non-functional. I will try to add the code for the entire form next.

P.S. With iOS 6, I was able to connect to the desktop Safari Debug menu for clear cache and view page source. Having been able to do so in iOS 7.
Up 3 rated Down
Michael May 29, 2014 10:00AM PDT Mobify Agent

Hi Kevin,

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?

Best,
Michael

Up 0 rated Down
Kevin May 29, 2014 07:01PM PDT
Products now add to the cart. This looks great. I may modify the code so that the static Mobify pages replace the Perl generated pages for mobile devices. Thanks for all your assistance.

BTW: Mac OS X (10.9.3), Safari 7.0.4
Up 0 rated Down
Kevin May 30, 2014 01:21PM PDT
For clarity, I included the entire FORM section rather than just the submit button to solve the issue. I had previously included a CGI script toggle to generate mobile pages. Now that these pages display correctly, the toggle was set to display the desktop page, which now is the Mobify page.
Up 0 rated Down
Michael May 30, 2014 03:03PM PDT Mobify Agent

Hi Kevin,

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.

Best,
Michael

Post Your Public Answer

Your name (required)
Your email address (required)
Answer (required)
support@mobify.me
https://cdn.desk.com/
mobify
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete