Header Image in Mobile View

• 

  bushnellprovidence · Member · Sep 28, 2015 at 1:24 pm

  • Copy link
  • Add topic to favorites

  How do I make the Header Image Shrink to size of Mobile Device? Right now it crops the image and so it cuts of all the wording

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

• 

  thesacredpath · Member · Sep 28, 2015 at 8:59 pm

  • Copy link

  The theme actually calculates the position and dimensions of things in the header area depending on the width of the screen/window it is being viewed on. This makes it very difficult to make the header image responsive. Add the following CSS and then narrow and widen your browser window to see what I mean. There is a large gap that appears below the image on smaller widths. We can construct a bunch of Media Queries to adjust this at different points, but it never works cleanly in situations like this.

  .backstretch img {
      height: auto !important;
      margin-left: auto !important;
      margin-right: auto !important;
      max-height: 100% !important;
      max-width: 100% !important;
      width: 100% !important;
      position: static !important;
  }

  My suggestion would be to either use a standard text-based title and have your header image just the cloudy sky, or create a transparent PNG image with the text title and Sunday schedule block in it and then we can insert that into the text title div with CSS and set it so that it adjusts to different widths.

  Let me know which way you wish to go after looking at things.

• 

  bushnellprovidence · Member · Sep 28, 2015 at 9:49 pm

  • Copy link

  I have created the transparent text tile with the Sunday Schedule block, now what can I do? I also replaced the images to be plain with out the text, and removed the code so we can move forward with the next step.

• 

  thesacredpath · Member · Sep 29, 2015 at 4:42 am

  • Copy link

  Hi, I checked your media library and don’t see the file there. If you can upload the file there, I can get to work.

  Also, go to Customize > Site Identity and check the Display Header Text box and save. We will hide the description text with CSS.

• 

  bushnellprovidence · Member · Sep 29, 2015 at 11:58 am

  • Copy link

  I have added the transparent file to the media library. The URl is https://bushnellprovidenceblog.files.wordpress.com/2015/09/title.png Let me know what else I can do. Thank you

• 

  thesacredpath · Member · Sep 29, 2015 at 7:07 pm

  • Copy link

  See what you think with this. On mobile’s the title is going to get pretty small, so it may need a wider stroke on the letters in the title.

  .site-title {
      background: rgba(0, 0, 0, 0) url("https://bushnellprovidenceblog.files.wordpress.com/2015/09/title.png") no-repeat scroll center top / contain ;
      color: rgba(0, 0, 0, 0);
      height: 250px;
      text-shadow: none;
  }
  .site-title a {
      color: rgba(0, 0, 0, 0);
      height: 250px !important;
  }
  .site-branding {
      padding: 5em 1em 5.4em;
  }
  .site-title a:hover {
      color: rgba(0, 0, 0, 0);
  }

• 

  bushnellprovidence · Member · Sep 29, 2015 at 7:41 pm

  • Copy link

  Sorry but what do you mean by stroke. Just make it wider? I can adjust the PNG file so it is wider but the letters aren’t affected.

• 

  thesacredpath · Member · Sep 29, 2015 at 8:09 pm

  • Copy link

  When you create the image of the title and schedule, make the title more bold so that it shows up better on smaller devices.

  Sorry, I sometimes revert to my graphic design experience. The width of the parts of a letter in a font is called the “stroke”.

• 

  axelware · Member · Oct 4, 2015 at 1:12 am

  • Copy link

  @thesacredpath I am also trying to shrink the header image on mobile devices, I copied the first CSS you provide but nothing happens on my mobile device (Iphone 5, ios 9.0.2).
  I am aware it’s not the same situation as bushnellprovidence because of my theme (Snaps) and my design, but I am trying to achieve that too. Also on the mobile device the site description text move in a lower position. I have enter a CSS in Customise-CSS to move it in the full size site.

  .site-description {
  margin-bottom: .5px;
  margin-top: 300px;
  }

  I had a problem with this though. The Customize previewing is “buggy”, it doesn’t show the site description text in the same position as in the saved full size site, but it matches the position on the mobile device size. It also does that with the font size. It’s probably something that I don’t quite understand rather than a software problem but I thought it worths a comment.

  Thanks.

• 

  kathrynwp · Staff · Oct 5, 2015 at 2:23 pm

  • Copy link

  axelware – please start a new thread and provide a link to your site. Thanks.