Replace header w/ mobile-specific header

• 

  bitterbutter2017 · Member · Feb 7, 2018 at 11:26 pm

  • Copy link
  • Add topic to favorites

  Hi all,

  On my site (bitterbutter.org), I love my header…but it gets totally cut off on mobile. Is there code I can use to activate a mobile-friendly header (the desktop header, but reformatted to the size of a mobile header) when someone accesses my site from a phone?

  Like, would there be a way to replace the .png file in my header with a DIFFERENT .png file based on the size of the window?

  Alternatively, is there a way to make the header mobile-responsive, so it automatically adjusts its size to fill the screen instead of getting cropped?

  Thanks in advance.

  -Dressler

  The blog I need help with is: (visible only to logged in users)

• 

  wdn2020 · Member · Feb 8, 2018 at 3:29 am

  • Copy link

  Please add this to your custom CSS:

  .has-header-image .custom-header-media img {
  width: 100%;
  height: auto;
  }

• 

  bitterbutter2017 · Member · Feb 8, 2018 at 5:52 pm

  • Copy link

  This works fairly well with the desktop site, but on mobile, the header image still shows up cropped. :(

• 

  wdn2020 · Member · Feb 8, 2018 at 5:56 pm

  • Copy link

  Please this instead.

  .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 {
  width: 100%;
  height: auto;
  }

• 

  thesacredpath · Member · Feb 8, 2018 at 9:27 pm

  • Copy link

  Hi @bitterbutter2017, this is going to be quite a challenge as the image area on Twenty Seventeen home page is designed to be full height, and right now the text you have in the header image starts to disappear at around 1000px in screen/window width.

  This is going to take me a little bit of time to figure out how to get the image container to resize with the image so that the text will remain visible for all screen sizes.

• 

  thesacredpath · Member · Feb 9, 2018 at 9:36 pm

  • Copy link

  @bitterbutter2017, give this a try and see what you think. I got some help from one of our theme developers, @laurelfulford on this as it was quite complex.

  .twentyseventeen-front-page .custom-header-media,
  .home.blog .custom-header-media{
      max-width: 100%;
      width: 100%;
      position: relative;
  }
  .twentyseventeen-front-page.has-header-image .custom-header-media img,
  .home.blog.has-header-image .custom-header-media img
   {
      height: auto;
      -o-object-fit: contain;
      object-fit: contain;
      width: 100%;
      min-height: 0;
      -ms-transform: none;
      -moz-transform: none;
      -webkit-transform: none;
      transform: none;
  }
  .twentyseventeen-front-page.has-header-image .custom-header-media,
  .home.blog.has-header-image .custom-header-media,
  .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
  .admin-bar.home.blog.has-header-image .custom-header-media{
      height: 0;
      padding-bottom: 60%;
  }
  @media (max-width: 782px) {
      .twentyseventeen-front-page.has-header-image .custom-header-media,
      .home.blog.has-header-image .custom-header-media,
      .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
      .admin-bar.home.blog.has-header-image .custom-header-media {
          padding-bottom: 52%;
      }
  }
  @media (max-width: 480px) {
      .twentyseventeen-front-page.has-header-image .custom-header-media,
      .home.blog.has-header-image .custom-header-media,
      .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
      .admin-bar.home.blog.has-header-image .custom-header-media{
          padding-bottom: 45%;
      }
  }
  .has-header-image.twentyseventeen-front-page .custom-header,
  .has-header-image.home.blog .custom-header{
      display: block;
      height: auto;
  }
  .has-header-image.twentyseventeen-front-page .site-branding,
  .has-header-image.home.blog .site-branding{
      position: absolute;
      top: 0;
  }

• 

  jc0221 · Member · Feb 14, 2018 at 8:22 pm

  • Copy link

  @thesacredpath — Thanks SO MUCH for this! I came here looking for the exact same answer to the exact same problem. Inserted your code and it looks great on my iPhone. Much appreciated, sir!

• 

  thesacredpath · Member · Feb 14, 2018 at 8:46 pm

  • Copy link

  @jc0221, you are welcome.