smitty62
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
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.
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" />
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.
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
ASKER
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!!
ASKER
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
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.
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 & Links</div>
</div>
</a>
</div>
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
ASKER
Thank you.
http://www.responsimulator.com/?url=insuranceqa.illinois.gov%2FTestSite3C%2Fdefault.html
If not please attach a screenshot to illustrate