Link to home
Start Free TrialLog in
Avatar of smitty62
smitty62Flag for United States of America

asked on

Page looks good on desktop & android, but ipad & iphone doesn't display correctly.

http://insuranceqa.illinois.gov/TestSite3C/default.html

The above page collapses fine on desktop when I go as narrow as possible, and it looks fine on android, but when I looked at it on the iphone & ipad the rows with the boxes 4 acrossed had the images and words in the box all scrunched on the left side of the screen.  Because it looks the same on both iphone & ipad I'm thinking it has something to do with it being an apple device.  I am using the meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />

Open in new window


which fixed the view on android, but apple will not display these rows correctly.  Is there another meta tag or script that will correct problem?  I know chrome has a device display application, but in the past I've found it useless because it only displays a screen size.  It doesn't actually mimic what it looks like on the physical device.
Avatar of Eoin OSullivan
Eoin OSullivan
Flag of Ireland image

Does this website correctly reflect the issue?
http://www.responsimulator.com/?url=insuranceqa.illinois.gov%2FTestSite3C%2Fdefault.html

If not please attach a screenshot to illustrate
BrowserStack can emulate iOS devices - I can see the issue there .. I generated screenshots of the page on 2 iOS devices to illustrate
https://www.browserstack.com/screenshots/1f06b625749643985168a022048123d24d8ae9af

It doesn't appear to be a viewport issue but a CSS compatibility issue as other parts of the layout render properly at the correct width.

It looks like the css / html you're using to generate those box panels is not 100% cross-platform

 User generated image
ASKER CERTIFIED SOLUTION
Avatar of Eoin OSullivan
Eoin OSullivan
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of smitty62

ASKER

Interesting.  I thought that css itself would work across all platforms, but I was wrong.  I didn't know apple would treat it differently. This was a template that was given to me that I have to use.  The custom css was already in the template.  What I would do if I was building this from scratch would be to try to use bootstrap only.  Unless you have a different idea I guess I'll rewrite the css specifically .banner-set & .row.  Do you know if their are similar classes in bootstrap that I could use?  Does bootstrap work across all platforms?  Do you know where I could get information about the differences in css concerning apple devices so I'll know in the future how to code for apple?
smitty - its not specifically the CSS but the actual code is NOT 100% standard.  Basically all the browsers have their own idiosyncrasies and Chrome, Explorer, Firefox, Safari, Edge etc. will have small differences in how they render HTML code
The Apple Safari browser (used by default on iOS and OSX) adheres to MOST HTML5 standards but clearly anchor tags are not allowed to be used as block elements unless you explicitly declare that.
Try my second HTML edit to the style on the Anchor tag and test that on iOS Safari

You really should use a service like BrowserStack to test your code on a huge range of browsers and platforms and spot some of the variations.
When designing a public-service website you have a huge range of users, platforms and browsers to design for and it is a real skill to make a website look good on all devices.
I will use browserstack in the future.  I have to run to a meeting right now, but I will get back to you after I play with the code a little bit.  Thank you for the clarification.  I thought Safari was no longer supported.  If it is please let me know where I can download it.  Is Safari only for mobile now?  I will get back to you as soon as I can.
Safari is dead on Windows but there are millions on iOS and Apple OSX desktops!!
I think that put us closer to a solution, but there was still the problem that the boxes would only display down and not across.  I played with it and got the below solution, but created another problem, and that is the boxes are pulling to the left again when collapsed.  

http://insuranceqa.illinois.gov/TestSite3D/default.html

<div class="banner-set row" style="float:left; margin-right:15px">
           <a href="http://insurance.illinois.gov/AutoInsurance/autoinsurance.asp" target="_self">
              <div class="banner icon-box-landing-page" style="background-color:#FDFDFD; width:262px; margin:15px; text-align:center">
                <h4><span>Auto Insurance</span></h4><br>
                <span class="livicon" data-n="car" data-s="62" data-c="#2b0af6" data-hc="#18058e" title="License Look Up"></span>
                <div class="description">Automobile Insurance Information &amp; Links</div>
              </div>
           </a>
        </div>

Open in new window


I'm going to try to move the "style" statements into the css file so that it doesn't over ride the @media max-width 600.  I'll let you know if that works.
Assign points and mark quest ion as resolved
Thank you.