How to full screen a section for Safari?

How to full screen a section for Safari?
0

#1

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?


#2

Have you tried 100% instead??


#3

i tried height:100%. It works well for the phone but not the desktop browser.


#4

Then a simple solution would be to use media queries for phone screens. for phones use % and desktop use vh.


#5

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!


#6

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.