Image full screen on mobile

  • Resolved emilyb9

    (@emilyb9)


    1 year, 8 months ago

    I’d like to make the image on the home page full screen on mobile. Everything I’ve tried so far hasn’t worked.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello, based on what I saw in the link, I have the following code which you can use as a starting point …

    /* Mobile: below 768px wide screens */
@media (max-width: 767px) {
  .home .page .entry-content .wp-block-image {
    height: calc(90vh - 138px);
  }
  .home .page .entry-content .wp-block-image > img {
    object-fit: cover;
    height: 100%;
  }
}
    • 138px is the header height on mobile
    • 90vh can go up to 100vh, but I used 90vh so the text in the image is not too close to the edge of the screen
    • Please adjust the code to your requirements
    • https://developer.mozilla.org/en-US/docs/Web/CSS
    • Happy WordPressing!
    Thread Starter emilyb9

    (@emilyb9)

    Gerry – this worked perfectly. Thank you for your help on this!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image full screen on mobile’ is closed to new replies.