Archived topic
hero images spacing
7 replies · Started by t29k75 on August 18, 2021
Hi,
I am using hero image on my HOME page inside a container.
On desktop I put minimum height 100vh. Viewing page on my screen, image is cut off at the bottom (even if I delete shapes). Could you let me know how to get a full height?
For mobile I would like to use different image with different dimensions (smaller size). Do you recommend specific dims & image ratio for mobile hero image?
Most other pages, I use Page Hero Block Element with Dynamic Background Image option. Is there any way to use different images for mobile for individual pages while using same settings (block element/dynamic background img)?
thanks,
Tibor
Hi there,
i am not seeing the issue with the 100vh container height. But your Shape Elements are part of the container, so they cover the bottom of the image. Try without the shapes, clear you plugin/browser caches and then resize the browser window to make sure it fits.
The only way to display a different image for mobile would require some CSS, but you would need to add that for every single post that had a different image.
Hi David,
deleted shapes, cleared cache. Image is still cut short. (see attached screenshots from page and original image).
Any advise for: "For mobile I would like to use different image with different dimensions (smaller size). Do you recommend specific dims & image ratio for mobile hero image?"
thanks,
T
I am not seeing that problem, on any size screen ( upto 27" 5K ).
Can you try a different browser.
just tried Chrome, Firefox and Safari. Chrome and Firefox have same cut off, Safari is showing bit more (30-40px) at the bottom, but still not all.
I get whole image when I adjust vh to 128.
my screen is 12-inch (2304 × 1440)
Hi there,
I've checked the site, and like David's inspection, I don't see the image being clipped.
Any chance you can provide a screen capture of this occurrence?
But before that, make sure you clear your browser cache. :D
Any advise for: “For mobile I would like to use different image with different dimensions (smaller size). Do you recommend specific dims & image ratio for mobile hero image?”
You don't have to change image if you plan to show the whole thing even on mobile, assuming you care more about the image fitting 100% width. If you want to fit it 100% height of the container but maintain a certain cropping, perhaps we can set a different background-position instead of immediately changing the image file. :D
Hi,
you right guys, there is no cut off. I played with the paddings/settings and realised that it must be my screen and browser with top toolbar, bookmarks bar, etc. As soon as I viewed it on full screen it looks just fine.
thanks for your help,
Tibor
No problem. :D
