Need a responsive header image

  • Resolved glassonlypros1

    (@glassonlypros1)


    6 years, 11 months ago

    I am trying to get the header image to be responsive in size on mobile. When I go to the page on a mobile device I only see a zoomed in part of the full image.

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

Viewing 1 replies (of 1 total)
  • Thread Starter glassonlypros1

    (@glassonlypros1)

    Got it fixed! I added this in the CSS
    @media screen and (max-width: 450px) {

    .has-header-image .custom-header-media img,
    .has-header-video .custom-header-media video,
    .has-header-video .custom-header-media iframe,
    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    height: auto;
    left: 0;
    max-width: 100%;
    min-height: 0;
    -o-object-fit: unset;
    object-fit: unset;
    position: relative;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    }
    }

    .custom-header,
    .has-header-image.twentyseventeen-front-page .custom-header {
    height: 870px;
    }

    @media only screen and (max-width:768px) {
    .custom-header,
    .has-header-image.twentyseventeen-front-page .custom-header {
    height: 400px;
    }
    }

    @media only screen and (max-width:480px) {
    .custom-header,
    .has-header-image.twentyseventeen-front-page .custom-header {
    height: 200px;
    }
    }
    .custom-header-media:before {
    display: none;
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Need a responsive header image’ is closed to new replies.