Header/Featured Image Scaling

ericgerestein · December 2019

Here's my test page:

https://www.chapelhilldental.ca/join/

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!

Pablo · December 2019

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

ericgerestein · December 2019

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?

Pablo · December 2019

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

ericgerestein · December 2019

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.

https://imgur.com/pl08Fro

Pablo · December 2019

I do not see it.

http://prntscr.com/q8ov9n

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

Header/Featured Image Scaling

Comments