Making image header scale (responsive)

  • Hi,

    I would like the image in the header to scale with the resolution the website is displayed. My website is https://tipsentopsvoormama.nl/

    In this case the image in the header is my logo but when viewing it on mobile the logo is too wide for the screen and it doesn’t adjust. I tried to fix this with max width but unfortunately it is not working.

    I hope someone can help me with this!

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello there,

    Please try these css code:

    @media screen and (max-width: 991px){
  .has-banner .site-branding {
    padding: 65px;
  }

  .site-header:after {
    background-size: contain;
  }
}

    Thread Starter MikevHam

    (@mikevham)

    Hi!

    Thank you for your answer.

    I tried this but with contain it also scales the background image up on bigger screens. I want the image to keep the original size it is now and only scales down. I don’t think this is possible with only css.

    Hi,

    I get the code in above when I am using simulator screen for iphone 6, and its working well in here.

    here is the screenshot https://prntscr.com/9n132u

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Making image header scale (responsive)’ is closed to new replies.