I’m current working on my portfolio and am stuck on how to make a section fullscreen.
As of right now, I’m using height:100vh; in the CSS and it works. However, it doesn’t seem to be supported on my iPhone. Any thoughts?
Have you tried 100% instead??
i tried height:100%. It works well for the phone but not the desktop browser.
Then a simple solution would be to use media queries for phone screens. for phones use % and desktop use vh.
What exactly are media queries? I’m relatively new to the HTML and CSS and would appreciate it if you point me in the right direction!
I think this link would be enough to get you started with Media queries.Actually it’s a functionality of CSS which can be used to tell the browser to use different styles then it would normally use for different screen sizes.
For your problem I think following could be a solution. use it at the end of css doc.
@media only screen and (max-width: 500px) {
your element {
height: 100%;
}
}
This code tells the browser to use the mentioned height for screens lower then 500px width. 500px becomes the breakpoint.