Search code examples
htmlcssmobilemedia-queriesheight

Setting a different height/width for a mobile site

I just created my portfolio, and want a full screen mobile site overlay to display saying 'coming soon' etc whenever my site is viewed on a mobile device.

I have tried this with media queries; however, for some reason the body height is being ignored. If you visit the site and inspect element, you can see that the site is still 300vw x 300vh.

html body {
  margin: 0;
  padding: 0;
  font-family: 'Karla', sans-serif;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 300vh;
  width: 300vw;
  background-color: #FFFFFF;
}

@media screen and (max-width: 768px) {
  body {
    height: 100vh;
    width: 100vw;
  }

  html {
    height: 100vh;
    width: 100vw;
  }
}

My website is 'https://nathan.work' if anyone wants to look in to the issue.

Maybe there's some way that when loaded on mobile, it takes the user to a completely different .html file? I'm unsure when it comes to mobile responsiveness.

Solution

  • For your site in particular, you can add position:fixed so wherever the user scrolls, the overlay follows.

    @media screen and (max-width: 768px) {
  html {
    height: 100vh;
    width: 100vw;
    position: fixed;
  }
}