Hi guys
Was wondering if there was anybody with IOS/Flexbox experience that can help me to unravel this css mystery!
I have created this http://virsosites.directcms.co.uk/matrix22/
It looks great on android phones but does not collapse so well on an ios phone, it goes all crazy! Is there a bit of css that can help to push it back into place and work like it does on an ios? Much appreciated!
Hayden
It seems to look ok on iphone5+ and is stacked with three blocks on top of each other.
The iphone4 looks broken and is in 3 columns like the desktop but I’m not sure of the flexbox support back that far.
The mac simulator also seems to show it ok but that only works from iphone 4s and upwards.
I have no iOS here, but looking in Firefox it seems broken at narrow widths.
ViRSO IT is clashing with the logo image.
I also notice that the logos <img> element is a direct first child of the <ul>, it should be within an <li> to be valid.
The issue with it is that the third block seems to stick and doesn’t work as well as the first two blocks, which is rather odd!
If you click on block one, it expands as expected, as does block 2 but block 3 behaves strangly
not too fussed about the logo at the moment just about getting it working correctly on an iphone but thanks!
Can you expound on “strangely” please? (I tried to Google “strangely” but it crashed my computer. There must be a lot of it going around .)
Does “strangely” happen at any particular width?
Which model iPhone are you using to test the page?
Brilliant response.
Ok, when in portrait mode, the bottom column, when they are stacked on top of each other does not expand as well as the other two, leaving a huge gap underneath it. On android it seems to work perfectly well so what i am hoping for really is a CSS media query that targets purely IOS that may hopefully fix that littler bug
The gap is caused by your centerme element which you have a give a top position of 40% and a height of 100vh. That means the bottom element when stacked in rows will have that element 40% from its top and then travel a further 100vh below the fold!!
As far as I can see you don’t need a height on centerme anyway.
.centerme {
cursor:pointer;
display:block;
margin: 0 auto;
text-align:center;
width:100%;
/*height:100vh;*/
position:absolute;
top:40%;
/*height:100vh;*/
color:white;
font-weight:bold;
font-size:20px;
z-index:999999;
opacity:1;
}
You have disguised that problem by hiding the overflow on the body rather than fixing the problem at source. IOS (often) won’t hide content on the body unless you add position:relative to it.
html, body {
height:100%;
width:100%;
overflow:hidden;
position:relative;
font-family: 'Open Sans', sans-serif;
}
You have errors in your html and your logo and your script element are not allowed to appear in the structure you have. All content in a list must be between the opening and closing list tags. e.g.
<ul>
<li> All content here</li>
nothing is allowed here
</ul>
You are also adding padding to fixed heights so you would be better off with the border-box model instead to ensure you don’t over-state dimensions
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
That should do for starters
Thanks for your help Paul! Excellent tips!
No worries. Let’s hope it makes a difference
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.