Support » Theme: Twenty Seventeen » Mobile Header Image Doesn’t Resize/Unresponsive

  • Resolved timmcke

    (@timmcke)


    Hi everyone,

    The theme seems to not be responsive when on my mobile? The header image goes off the screen and doesn’t scaledown. Does anyone have a css fix for this?

    Thank you for your time,

    Tim

Viewing 15 replies - 1 through 15 (of 17 total)
  • Loving the new theme!! Hoping to hear an answer on scaling header for mobile as well!

    I’m having the same issue with the main site header not resizing / being responsive. When my site is set up as static page, but the other header images of linked pages as static page content, are responsive.

    The site typically has a video header, but uses a static image as fallback while the video loads or for low bandwidth devices, such as mobile.

    My site is http://clancy.tech/

    Yes sorry, forgot to say that my site is http://timmckean.org

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @timmcke, The image is responsive but it resorts to cropping-to-center on mobile. This is a common technique to avoid a small header image and a large gap beneath the image as it proportionately resizes. Either the image is cropped or the image is resized small with a gap beneath it.

    If you want the resized image & gap technique, try the following.
    If you’re not using a Child Theme, and if the theme doesn’t have a section for CSS modifications then do the following:

    1. Install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin
    2. use its “CSS Code” section of the dashboard to hold your CSS modifications:
    3. (put this code in)

      
      @media screen and (max-width: 480px) {
      
          .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;
          }
      }
      
    4. Save

    Alternatively use your Child Theme style.css file to hold your CSS modifications

    • This reply was modified 2 years, 11 months ago by Andrew Nevins.
    • This reply was modified 2 years, 11 months ago by Andrew Nevins.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @clancychem, Please open a new thread to discuss your different issue: https://wordpress.org/support/theme/twentyseventeen/#new-post

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If you want the resized image without a gap you’re going to have to consider reshuffling the markup, CSS and potentially introducing some new JS to the page. It’s a lot of effort for what might be little reward.

    I agree with the decision of the theme developers to crop the image, they have thought about the cleanest solution for the users.

    • This reply was modified 2 years, 11 months ago by Andrew Nevins.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @timmcke, Another way around it would be to change the theme design on mobile so that the title does not sit on top of the image. It would produce this result: https://snag.gy/iywSX0.jpg – Is that what you want?

    You can achieve that by using this CSS instead:

    
    @media screen and (max-width: 480px) {
        .has-header-image.twentyseventeen-front-page .site-branding, 
        .has-header-video.twentyseventeen-front-page .site-branding, 
        .has-header-image.home.blog .site-branding, 
        .has-header-video.home.blog .site-branding,
        .has-header-image.twentyseventeen-front-page .custom-header, 
        .has-header-video.twentyseventeen-front-page .custom-header, 
        .has-header-image.home.blog .custom-header, 
        .has-header-video.home.blog .custom-header {    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;
        }
    
        .has-header-image.twentyseventeen-front-page .site-branding, 
        .has-header-video.twentyseventeen-front-page .site-branding, 
        .has-header-image.home.blog .site-branding, 
        .has-header-video.home.blog .site-branding,
        .custom-header-media,
        .has-header-image .custom-header-media img, 
        .has-header-video .custom-header-media video, 
        .has-header-video .custom-header-media iframe {
            position: static;
        }
    
        .custom-header-media:before {
            background: none;
        }
    
        body.has-header-image .site-description, 
        body.has-header-video .site-description {
            color: #222;
            opacity: 1;
        }
    
        .site-branding .wrap {
            padding: 0 1em;
        }
    }
    
    • This reply was modified 2 years, 11 months ago by Andrew Nevins.
    • This reply was modified 2 years, 11 months ago by Andrew Nevins.

    @anevins Thank you very much for your assistance!

    Hello here from Holland, I am facing the Same seizing problems with Twente Seventeen (test enviroment http://www.elzentlaanappartementen.nl/MSO/ ), but when I only use the menu navigation in Stead of scrolling The seizing is OK! In my case I have NO problems with the iPhone and macbook, only with the iPad Air2 and iPad mini..

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    @sleutelplein, You must create your own thread to discuss your own problems: https://wordpress.org/support/theme/twentyseventeen#new-post

    Second option worked perfectly for me… Thank you!

    Or you can try this if you want .site-branding over your Header

    @media screen and (max-width: 480px) {
    
        .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 
    .site-branding {
            position: absolute;
      }
    {
            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;
      
       }
    }

    Thanks does not work en now my “in between” images have become smaller in the iPhone vertical.
    I use now this similar CSS but still no correct view of header image.

    .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;
    }

    After instelling the css frikkadello I have a new Problem after removing all css content, that layout Headerview on handy is larger then the pages.
    gap between Haeder and pages

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Mobile Header Image Doesn’t Resize/Unresponsive’ is closed to new replies.