How do I center this main element so that in landscape mode the element isn't cut off from the top?

user_13548774 0
Viewed 61

The page in portrait looks good, but in landscape, the main element is cut off a bit at the top and only scrolls down.

This is the page in landscape mode.

this is the page in landscape mode.

Below is snippet of the CSS code for the body and main elements.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 1440px;
  max-width: 1440px;
  font-family: 'Red Hat Display', sans-serif;
  font-size: 100%;
  background-color: hsl(225, 100%, 94%);
  background-image: url(/images/pattern-background-desktop.svg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 667px;
}

css html
1 Answers

The way to avoid this problem is to use object-fit from CSS properties. You can use the Mobile-Detect JavaScript library to change the element's style sheet by detecting whether the mobile device is horizontal or vertical.

if( $detect->isMobile() && !$detect->isTablet() )
{
    /* Apply style properties for mobile devices */

} elseif ( $detect->isTablet() ) {
    /* Apply style properties for tablet devices */

} else {
    /* Apply style properties for desktop devices */
}

Add the following style jQuery to the <img> element and/or other elements to crop the image and keep the aspect ratio:

<img id="resizeImage" style="width: 300px; height: 400px; object-fit: scale-down;"/>
user_150326880
Related