CutCodeDown
Web Development => HTML / CSS => Topic started by: GrumpyYoungMan on 17 Jan 2021, 04:32:03 am
-
myPen (https://codepen.io/GrumpyYoungMan/pen/MWjZMbX)
The footer padding seems to be lost on the iPhone safari broswer - may effect others browsers as not tested them but I have never experienced this before... is it becasue I am using a flex wihin a flex?
-
The "universal reset" can have oddball repercussions, this COULD be part of it. It's why I suggest more verbose resets as applying *{} can go a bit wonky for margin. MORE of an issue on form elements it's part and parcel of why I say "just don't do it"
What's with the empty "anchors for nothing"? Are you still trying to use the outmoded "name" approach but switched them to ID's? If so, just put the ID's on the DIV/SECTION and drop the pointless anchors. That's what ID's are for.
But overall I'm not seeing anything too far off, but could you define "lost"... oh wait, you're relying on the DEFAULT flex behavior, which on some devices flex-shrink is ON by default.
Try setting flex:0 0 auto; on both <header> and <footer>. If shrink is on, it'll shrink smaller than its content.
-
The "universal reset" can have oddball repercussions, this COULD be part of it. It's why I suggest more verbose resets as applying *{} can go a bit wonky for margin. MORE of an issue on form elements it's part and parcel of why I say "just don't do it"
I have always done the reset via the * and have never experienced this problem...but change it out anyway... :)
What's with the empty "anchors for nothing"? Are you still trying to use the outmoded "name" approach but switched them to ID's? If so, just put the ID's on the DIV/SECTION and drop the pointless anchors. That's what ID's are for.
I didn't know that the links would target div's too... Sorry! I'll update my code! :)
But overall I'm not seeing anything too far off, but could you define "lost"... oh wait, you're relying on the DEFAULT flex behavior, which on some devices flex-shrink is ON by default.
Try setting flex:0 0 auto; on both <header> and <footer>. If shrink is on, it'll shrink smaller than its content.
:o :o :( Oh!! I completely forgot about that - and that should fix my issue! THANK YOU!!! :) :D :)
-
I’ve been thinking about this issue, is the problem basically they Safari doesn’t like nested flexes?!
Thanks once again for your continued support! I appreciate it!