screen rotation problem

so i made my layout and it looks good but i realized that in mobile rotations the site will have problems so i checked it and i was right i made the landing 100vh so that's like really small area in mobile rotations size so it over lab
22 Replies
ABK | Muneer
ABK | Muneer3y ago
normal thing
ABK | Muneer
ABK | Muneer3y ago
mobile rotation
b1mind
b1mind3y ago
Need code but again its cause you are using absolute position put it in a pen
ABK | Muneer
ABK | Muneer3y ago
i know there's a media queries for landscape mode but i think if i make it it will effect ipads too i'm doing that https://codepen.io/IQmuneer/pen/abGYZgJ i change the background of the page to red to make it easier to read
b1mind
b1mind3y ago
you need to get away from using ViewPort units Learn the why and dos donts first
ABK | Muneer
ABK | Muneer3y ago
i realized that while i was thinking about it on mobile viewport it is really small
b1mind
b1mind3y ago
setting strict heights no matter the unit is typically bad too
ABK | Muneer
ABK | Muneer3y ago
on rotations
b1mind
b1mind3y ago
use min/max also this demo does not show the issue ?
ABK | Muneer
ABK | Muneer3y ago
is there a way to change the view port of the codepin ?
b1mind
b1mind3y ago
I mean yea slide the view or use devtools
ABK | Muneer
ABK | Muneer3y ago
ABK | Muneer
ABK | Muneer3y ago
that's the problem in mobile rotation a position absolute would be over the hero should i use media queries i know there's on for landscape
b1mind
b1mind3y ago
Litterly just remove the absolute stuff and it works
ABK | Muneer
ABK | Muneer3y ago
but i'm afride it would effect tablets that way it looks cool : (
b1mind
b1mind3y ago
You don't need it like I don't get why you are using it to start just put it below the other image display: block
ABK | Muneer
ABK | Muneer3y ago
i want the img to be on the bottom of the landing
ABK | Muneer
ABK | Muneer3y ago
b1mind
b1mind3y ago
Again beck and both told you the right tools https://codepen.io/b1mind/pen/PojdyQz here is both a grid/flex example I prefer the grid method obviously cause you have more control
ABK | Muneer
ABK | Muneer3y ago
i'll test things out with grid rn
b1mind
b1mind3y ago
auto is handy but you can also do min/max-content, then you can also position x/y where you want with start/end/center align/justify content will keep stretch on children while items will make them only their max-content
ABK | Muneer
ABK | Muneer3y ago
did it great ! this is way more better than setting absolute since it can get over stuff great thing to know and to keep in mind for future stuff thank you for the help b1mind
Want results from more Discord servers?
Add your server