Hero Photos not scaling for Mobile

[Rich Nicoloff]

Bill,

I’ve used the original Visual theme for a few years, but am switching over to Elite for more of visual WOW. I still have a lot of customizing & tweaking, but I really like the way my site looks so far. One thing I’ve noticed, though, is that my Hero images don’t scale down enough on my android smartphone or tablet, so I can only see part of the photo. Is there an easy way to have those images scale so that the entire width of the photos can be seen?

[Rich Nicoloff]

After playing around with resizing my browser window, I notice that that the images don’t scale any way but larger regardless of whether it is mobile or desktop.

[Bill Robbins]

Hello Rich,

Great questions. The hero image is set to always “cover” the top of the site. That’s also set to be full screen, so you’ll have an image at the top that is always the full height and width of the browser window.

There is an uploader at the very bottom of the hero area options where you can upload an image that will appear on smaller browser windows. You can use it to add an image that will appear when the browser window is smaller than 768 pixels wide.

If you need to have something like a logo, I would suggest separating it from the background and using the Hero Logo uploader to upload a separate image for it. That spot will scale down as the browser window shrinks and won’t be cropped. That’s the best way to handle logos.

There will always be some cropping of the background image. The amount depends on the difference in aspect ration between the image and the browser window. The more similar they are, the less cropping. The greater the difference, the more cropping there will be since it has to cover the area.

If you have any questions, let me know.

Thanks,
Bill

[Rich Nicoloff]

Ahhhhh….I see. Looks like the the “full screen” feature I like so much on the desktop/laptop is going to make it tough to look good on tablets that most people use in a portrait orientation. Oh well. Good thing you have a lot of great themes from which to choose!

Thanks! — Rich

[Bill Robbins]

…and that’s why there is an option to have a separate image for narrower screens. That way you can crop an image so that it conforms to those sized screens specifically. You can have it both ways.

Take care,
Bill

[Rich Nicoloff]

I was sitting here thinking “Why on Earth would having a smaller copy of the image help?” when it finally sunk in, “Oh, I can use a portrait orientation image instead of a landscape!” Duh.

Thanks!

[Bill Robbins]

No problem 🙂

[Author]

Posts