Make the header image of the Apostrophe theme responsive

• 

  sottevilleaufildutemps · Member · Sep 17, 2020 at 2:57 pm

  • Copy link
  • Add topic to favorites

  Hello,
  For the header of my blog, I just put a logo and the title in text format because for this theme (Apostrophe 2), the header image is not responsive. For now, it adapts well to display on smartphones.
  Now I would like a more creative header, an image format banner, which spans the entire width of the screen. But on smatphone we will only see the central part.
  What should I do to make the image responsive? Are there any CSS lines to add?
  Thanks for your help !
  Laurent
  https://sottevilleaufildutemps.fr/

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

• 

  tenchoenyi · Member · Sep 17, 2020 at 5:46 pm

  • Copy link

  Hello Laurent,

  Can you add this following CSS code for responsive header.

  @media (max-width: 767px){
  
  .site-branding {
      max-height: 200px;
      padding: 0.5em .5em 1em;
  }
  
  .custom-logo {
      height: 90px;
  }
  
  .site-title {
      font-size: 18px;
  }
  
  .site-description {
      font-size: 18px;
  }
  }

• 

  sottevilleaufildutemps · Member · Sep 17, 2020 at 6:42 pm

  • Copy link

  Thank you for your reply !
  I temporarily put an image in the header, just enough time to do some tests, of course I also inserted the css, but it doesn’t work: on a smartphone we always only see the central part of the image !

• 

  tenchoenyi · Member · Sep 19, 2020 at 8:16 am

  • Copy link

  Hello,

  I just checked your site and it’s not responsive on smartphone so you can add this CSS code without removing the default CSS code.

  
  @media (max-width: 767px){

  .site-branding {
  min-height: 89px;
  width: 100%!important;
  }
  }

• 

  tenchoenyi · Member · Sep 19, 2020 at 8:17 am

  • Copy link

  @media (max-width: 767px){
  
  .site-branding {
  min-height: 89px;
  width: 100%!important;
  }
  }

• 

  sottevilleaufildutemps · Member · Sep 19, 2020 at 4:42 pm

  • Copy link

  Yes it is much better. But the ends are still cut. I suppose you have to act on one of the 767px or 89px parameters (sorry, I do not know css at all!): I tried to increase or decrease these parameters but it does not change anything.
  Here is the screenshot:
  link screenshot

• 

  tenchoenyi · Member · Sep 20, 2020 at 9:36 am

  • Copy link

  Hello,

  You can replace this below CSS code

  .site-branding {
      background: url(https://sottevilleaufildutemps.files.wordpress.com/2020/09/cropped-banniere.jpg) center center;
      background-size: cover;
      height: 200px;
  }
  
  @media screen and (max-width: 767px){
  .site-branding {
      height: 85px;
  }
  }

• 

  sottevilleaufildutemps · Member · Sep 20, 2020 at 9:09 pm

  • Copy link

  Hello,
  No, it doesn’t work. I just have a very small middle part (like when no code is added). Besides, a lot is written in red, it must have detected an error …
  But that’s okay, I’m not going to bother you anymore, I seem to be a special case …
  Thank you !

• 

  tenchoenyi · Member · Sep 22, 2020 at 5:55 am

  • Copy link

  Hello Laurent,

  I have checked your site and you need to remove /*min-height: 200px; */
  /* padding: 3em;*/ from site branding class

  Your old CSS code look like this

  .site-branding {
      background: url(https://sottevilleaufildutemps.files.wordpress.com/2020/09/cropped-banniere.jpg) center center;
      background-size: cover;
      height: 200px;
      min-height: 200px;  /* you need to remove this code or unset*/
       padding: 3em;  /*you need to remove this code or set it 0px*/
  }

  Replace or new CSS code

  .site-branding {
      background: url(https://sottevilleaufildutemps.files.wordpress.com/2020/09/cropped-banniere.jpg) center center;
      background-size: cover;
      height: 200px;
      min-height: unset; /* I just unset it */
      padding: 0px;   /* I just set it 0px*/
  }
  

  After replacing this above CSS code, your site header will be in responsive on smartphone. Let me know if above code works.

• 

  sottevilleaufildutemps · Member · Sep 22, 2020 at 3:29 pm

  • Copy link

  Hello,
  I don’t have this anywhere in my additional css:
  min-height: 200px;
  padding: 3rd;
  I suppose it is therefore in the hard css of the theme (which therefore cannot be modified).

• 

  sottevilleaufildutemps · Member · Sep 22, 2020 at 3:30 pm

  • Copy link

  Next:
  I put the “new css code” that you give, but it doesn’t change anything …

• 

  tenchoenyi · Member · Sep 23, 2020 at 7:47 am

  • Copy link

  Hello

  I checked your site and you had added the new CSS code but you have removed other CSS code which I have given you earlier.

  You can add these two CSS code in your additional CSS for responsive header .

  /* This new CSS code you have already added and you don’t need to add it again*/

  .site-branding {
      background: url(https://sottevilleaufildutemps.files.wordpress.com/2020/09/cropped-banniere.jpg) center center;
      background-size: cover;
      height: 200px;
      min-height: unset; /* I just unset it */
      padding: 0px;   /* I just set it 0px*/
  }

  /* This below CSS code should be added in additional CSS*/

  @media screen and (max-width: 767px){
  .site-branding {
      height: 85px;
  }
  }

• 

  sottevilleaufildutemps · Member · Sep 24, 2020 at 12:57 pm

  • Copy link

  Hello !
  I did not understand that the new code was to be added (I was putting it in place of the old one).
  Now it works!
  Thank you very much, you are an expert!
  Laurent

• 

  tenchoenyi · Member · Sep 24, 2020 at 4:08 pm

  • Copy link

  Hello @Laurent,

  I am glad that finally it’s worked.