Mobile header adjustment in theme 2017

  • Resolved designbysue

    (@designbysue)


    1 year, 4 months ago

    I know this is an older theme but is perfect for what i needed to do on this website. The set up is perfect except that the header image does not reduce on mobile devises, causing the image of the candidate to be off the screen. Can someone provide CSS to reduce the image to fill the screen and look like the images below? Or CSS to replace the header with a different image (I can create one where the photo is centered. Any assistance greatly appreciated as other than this the site is done.

    FYI I tried the following and it does not work (found through a search)

    @media screen and ( max-width: 800px ) {
    #masthead.site-header {
    background-size: auto 100%;
    }
    }

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Gerry

    (@metamezzo)

    1 year, 4 months ago

    Hello, please try the following, it seems to work on all screen sizes without having to replace the current header image …

    @supports (object-fit:cover) {
  .has-header-image .custom-header-media img {
    object-position: center left;
  }
}

    The flag gets hidden though on smaller devices.

    Hope this helps and good luck!

    Thread Starter designbysue

    (@designbysue)

    1 year, 4 months ago

    That helps a lot – at least his image is displayed. Would really prefer if the image could be reduced to fit so the flag displayed also but at this point I can get paid! Thank you so much!

    If anyone can post a solution that reduces the image to scale the page that would be great. My “dream” is to have the header image look like the image that is showing up last in the scroll down.

    Again thank you for the solution provided!

    • This reply was modified 1 year, 4 months ago by designbysue.
    Thread Starter designbysue

    (@designbysue)

    1 year, 4 months ago

    Can someone please help me with my original request? Gerry’s solution helped but the results does not display the image of the flag behind the person. There has to be some way to make this header responsive – the rest of the theme is. Please?

    Gerry

    (@metamezzo)

    1 year, 4 months ago

    Hello, the home page works differently from the rest of the pages. I checked one of the pages (not the home page) and I can see the image of the person and the flag, but the header text covers them both. If that is what you need, then the following can be a starting point …

    /* Replace previous code I provided with the following */
@supports (object-fit:cover) {
  .has-header-image .custom-header-media img {
    object-position: center left;
    position: absolute;
  }
}

.has-header-image.twentyseventeen-front-page .custom-header {
    height: auto; /* Feel free to change this */
}

    Using height: auto will make the home page header look like the other pages, with the header text completely covering the image of the person and the flag. But changing auto to some other value, such as height: 40vh, will give the header image some room so it is not entirely covered by the header text. So feel free to adjust the height value according to your needs. Hope these help and good luck!

    Thread Starter designbysue

    (@designbysue)

    1 year, 4 months ago

    Thank you Gerry – that looks much better on my phone! Sent it to client for his approval – hoping looks as good on his. Really appreciate your expert advise.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile header adjustment in theme 2017’ is closed to new replies.