Homepage feature images on cellular devices incorrectly positioned

  • Resolved liteman11

    (@liteman11)


    2 years ago

    I’m using feature images for all pages throughout this site. However, in mobile devices in portrait mode with a viewport width of 440px or less, the feature image on the homepage separates from the header with a whitespace gap about half the image height. This is occurring only on the homepage. All the other pages render with the feature image flush against the header. Tried changing the image and the homepage—doesn’t matter. No matter what page is designated homepage, the whitespace margin under the header occurs. I thought it might be my custom CSS or Child Theme changes, but not so. This issue also occurs using the bare-bones Twenty-Fourteen theme w/o modification. Any ideas on what might be occurring and how I can fix it. I’ve exhausted my CSS and media query chops and nothing will seem to close up that space. Thx

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Alvaro Gómez

    (@mrfoxtalbot)

    Hi @liteman11.

    I see what you mean. I am not sure why the theme adds this gap on mobile, but you can remove it by adding this custom CSS code:

    /* Remove margin above featured image in homepage */
@media all and (max-width:680px){
  .home .content-area {
    padding-top: 0;
  }
}

    Let me know if that helps!

    Thread Starter liteman11

    (@liteman11)

    That CSS fixed the issue perfectly, Alvaro. Thanks a million.

    Alvaro Gómez

    (@mrfoxtalbot)

    You are welcome!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Homepage feature images on cellular devices incorrectly positioned’ is closed to new replies.