Header/Featured Image Scaling

edited December 2019 in Files & images
Here's my test page:


I'd like the header image (the colourful image of people with paint on their faces) to scale down proportionally when viewing the site on mobile, instead of just zooming in on the middle guy's cheek. Thanks for your help!

Comments

  • Hello,
    Unfortunately, your image does not be scailed properly, I mean - if we'll make it full width, then effect on mobile will be the same, but if we'll make the "Contain" size, it will look good on mobile, but not on all sizes.
    If it would be only image, then yes - it will be scailed as you told, but it's inside the header, so it will behave kinda different, because it's a background image, not an image.

    We suggest to use the full-width option, it will look better, apply this css code into the theme options > custom css & js > css
    body:not(.template-slider) #Header_wrapper{
    background-size:cover !important;
    }
    Thanks
  • Hi Pablo! I'm very happy with that, the only trouble is that a small strip of dark blue appears under the image when I go on mobile. Is that because my image size is wrong? Can you recommend the proper image size (dimensions) so it fills the header on all devices?
  • I do not see it - did you solve that problem?
    If not, please send us a link to the screenshot of that problem and tell us on which device do you see it and which browser are you using.
    Thanks
  • See attached screenshot, I'm referring to the skinny dark blue line under the image. Visible on Chrome desktop when I reduce window size to mobile.

  • I do not see it.

    I'm testing it on that page you sent, but as I see, text inside is different.
    Can you send me a link to that page? - also, please clear your browser's cache.
    Thanks
Sign In or Register to comment.