Images are getting "zoomed in" and mobile height isn't working

Support
#1

I’m trying to figure out how to modify images so they display correctly on mobile. I finally got one image to look and function correctly on mobile, so I “duplicated” that section, then just changed out the image. The idea was to keep all of the same settings in place so I didn’t have to reprogram everything. However, the mobile height for the second image (the one attached that shows the beer mugs) is being cut off again on mobile. Can you please show me how to work with images better?

The other issue is that the theme appears to automatically “zoom in” on the image instead of using the whole image. Is there a setting that’s causing the images to be zoomed-in on?

Experience The Springs Never miss a thing in Colorado Springs! Events, local gems, good brew, and great food!.png
Experience The Springs Never miss a thing in Colorado Springs! Events, local gems, good brew, and great food!.png750×1334 190 KB

#2

Hi @jhayles,

Thanks for reaching out.
The reason behind your two different issues is the same, the first image column has been set with a height of 70vh which makes the image zoom-in and as that height is not set to the second image( the beer mug), it looks like cut off the image. So if you want the second image to be height as the first one add the height 70vh but it will zoomed-in as the first one.

Screenshot-252-
Screenshot-252-1918×910 514 KB

Thanks

#3

I have played back and forth with those numbers and made them both the same, then changed it back to see if I can visualize how that number is changing the images. I am getting different image heights, even when they’re both at 70, or even at 10vh. I was told to use that code to control the height of the images on mobile (which is the issue I’m having). They didn’t say that it had anything to do with the zoom level. Controlling the image height is the only reason that code is there.
The images are very different on desktop vs. mobile. So, I need to know how to control the image height (without the image being zoomed-in on) for mobile and desktop. How do I do that?
Also, the visual I’m getting inside the PRO editor is different than what’s being displayed on live screens (see attached link): https://www.dropbox.com/sh/yplnq1gvj6gv9r9/AADrdhu4qzUYc6zFPb_VWIsOa?dl=0

#4

Hi @jhayles,

Please note that these are the background images and background images behave differently in different screen resolutions. Background size depends on the size of its section by default meaning background images are responsive by nature. So to adjust your background images, you need to adjust the size of your section.

You can try increase/decrease the padding of the section to adjust the background image size. You see difference in the Pro editor and live preview simply because in editor there is a virtual padding given to the section to make the area droppable, however in live preview the section has the padding which is given in the settings.

To learn more about background size property please see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Hope this helps!

#5

I had no idea it would be this difficult to work with images. I went with ThemeCo because I thought their system would make all of this easy. Why are the images “zoomed-in” on desktop (they’re huge) but on mobile they’re zoomed-out?

#6

I have the bottom image code set to “70” and the upper set to “10” yet they appear to be the same size still? What is that code actually doing?

#7

Hello @jhayles,

I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Be advised that the background image size depends on the height of the section which is also dependent on the total height of the row which in turn, also dependent on the total height of the column. This is why we add 70vh and vh means “Viewpoint Height”. You can check it more about it here: https://www.sitepoint.com/css-viewport-units-quick-start/

By the way, if you do not want the background image to zoom-in or zoom-out and you do not have any text contents on top of the background image, it is best that you use the image as an element inserted in the column. Having this way, the image will always display correctly depending on its dimension. If you want, you can give us access to your site so we can give you an example.

Hope this helps.

#8

Thank you for the additional information. It helps me to understand a little better. The main thing I’m still confused on is what is the best, or recommended option, given there are many options to choose from? I tried the image as an element but it doesn’t cover the background the way the others do, so I’m not a fan of the way that looks.
I would be most grateful if you could log into the account and give me some examples, please! That would be great. I’ll send a secure note with my info…

#9

Hey @jhayles,

I went ahead and logged in to your site. I created a test page using the image. Here are the things I did:
1.) I made sure to remove any top and bottom padding of the section element.
Screen Shot 2020-11-20 at 5.24.15 AM

2.) I disabled the Global Container in the row settings. I set the width and maximum width to 100% as well.

Screen Shot 2020-11-20 at 5.25.00 AM
Screen Shot 2020-11-20 at 5.25.00 AM580×888 54.4 KB

3.) In the image settings, I set the width to 100%
Screen Shot 2020-11-20 at 5.26.15 AM

4.) And then to force the image to always display fullwidth, I added an inline CSS in the image element settings:

$el img {
  width: 100%;
}

You can save the section I created as a template so that you can use it whenever you want to create something similar. Check out the secure note for the URL of the test page.

Regards.

#10

Thank you for the help. I think we’re getting close. However, there are still two issues:

  1. Look at the screenshots (properly named). The images you did (labeled “not zoomed-in”) look much better and display higher image quality. I saved your setup as a template and inserted it into mine, then deleted the sections I originally created. However, when I visit my page the images are still zoomed-in. Again, the screenshots will reveal the difference.

  2. Also, the Parallax feature is important to me, and I can’t find it with your new setup. How do I enable Parallax on the images again?

#11

Hello @jhayles,

The parallax is not available when using the image element. The parallax effect option is ONLY available when you use the image as your section background image. And it is also the reason why the image looks like been resized or “zoom in/out” because of the parallax effect.

Kindly review these links to better understand parallax:

Thank you for your understanding.

#12

Okay…so you’re saying that I can not have the Parallax feature without the images being zoomed-in on. Is that correct?

#13

Hello @jhayles,

Yes, that is correct. Normally, a background image will try and fill the whole section. If the actual image dimension is larger than the section area, it is more likely that the image will be zoomed in. And for the parallax to happen, the image needs to be zoom-in so that as you scroll the page and the parallax takes effect, there is the illustration that some parts of the image were hidden away and will only be visible as your scroll up or down.

Hope this helps.

#14

Okay. Now I’m trying to put it all back the way it was. I didn’t know that I would lose the Parallax feature. How do I make the Section element bigger so that more of the picture fits in there? When I tried to add it all back now the section element is small and only showing a small portion of the image…

#15

Hello @jhayles,

Please click your column and then set the minimum height to at least 70vh.

Screen Shot 2020-11-21 at 9.33.09 AM
Screen Shot 2020-11-21 at 9.33.09 AM584×582 37.9 KB

Again, you can check it more about vh unit here: https://www.sitepoint.com/css-viewport-units-quick-start/

Thanks.

#16

Sorry to be a pain, but it’s still not working correctly. I did the settings the same as you showed above and the top image is a different height than the bottom image. I want both images to be the same height. Also, the Parallax stopped working. What did I do wrong there?

#17

Hello @jhayles,

I have changed the minimum height to 100vh and make sure that the background image has the proper setup.

Screen Shot 2020-11-21 at 10.47.19 AM
Screen Shot 2020-11-21 at 10.47.19 AM582×1782 130 KB

The parallax is now working. Check the page again.

#18

Thank you. But I don’t understand why the images are displayed a different height on mobile. Can you check the site on your mobile device, so you can see what I mean? The height of the top image is much taller on mobile…

#19

Hello @jhayles

I checked your site on my phone it looks fine at my end. There might be cache issue at your end I would recommend you to clear your browser cache and then check it again.

2020-11-21
2020-11-21699×1242 166 KB

Thanks

#20

I’ve cleared my phone cache and restarted my phone, twice. The heights on the images are still different. See attached. And now that I’m looking at your screenshot it doesn’t look like the images are the same height either…