Search code examples
htmlcssmedia-queries

Word Press Static page full height at home page for mobile


I want the site to be 1 page, with the footer and everything and no need to scroll down, the mobile view of the site always show scroll bar on small devices screen but looks great on large screen phones like onepls6 or iphone8+ ...

@ media only screen and (max-width: 460px)
{
   .header-image 
    {
       height: 458px;
    }
}

if I made the height like less, it will show well on small devices, but, I got a white page under the footer on large screen mobile devices


Solution

  • #page {
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    
    .header-image {
      flex-grow: 1;
    }