How to change header image width to full page

• 

  intermedievalist · Member · Aug 4, 2018 at 3:04 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I’ve been trawling through numerous threads on this topic and none of the CSS codes have helped me change the width of the header image. I’m using the Rosalie theme and I can’t manage to make the header image stretch right across the page. the last code I tried that didn’t work is:

  
  @media screen and (max-width: 1356px) {
  .header-image-wrap {
  width: 1356px;
  }
  }

  The blog I need help with is http://www.intermedieval.com
  Or http://www.intermedieval.wordpress.com

  I’ve uploaded a dummy header for the time being to illustrate the issue.

  thanks in advance for any help.

• 

  garysixtyeight · Member · Aug 5, 2018 at 3:56 pm

  • Copy link

  Hi there,

  Please try using the CSS below. It should make the image full width on screens narrower than 1356px.

  @media screen and (max-width: 1356px) {
      .image-header-flexible {
          padding-left: 0;
          padding-right: 0;
          width: 100%;
      }
  
       .image-header-flexible.container img {
           min-width: 100%;
       }
  }

  If the CSS doesn’t work, please keep it in the customizer so I can troubleshoot it further.

• 

  intermedievalist · Member · Aug 5, 2018 at 7:41 pm

  • Copy link

  Amazing, thank you! This code worked.

• 

  garysixtyeight · Member · Aug 5, 2018 at 7:46 pm

  • Copy link

  You’re welcome, glad I could help :)