Full width image element not showing correctly on large screens

[darryl_corp]

Dear team,

I’ve set some header images and also some full width “slider banner” images on my website.

Somehow they are not showing correctly on larger screens. I’ve tried playing around with all the setting but it’s not working out for me.

https://www.girisunyata.org/ here for example. the header and also the image with hands. (those are image elements. the others are background column layers with parallax, somehow those work fine.) the reason I used image elements for these headers and banner images is because without content on mobile devices especially it doesn’t show well. I want just the full image as a banner and not zoomed in or anything.

same problem i have with the image elements on the headers in:
https://www.girisunyata.org/our-purpose-mission/
https://www.girisunyata.org/about-us/
https://www.girisunyata.org/get-involved/

My aim is to have the images full width and full height across all devices. So they scale automatically.

I’ll share log-in details in secure note.

Thanks a lot,

Darryl

[tristup]

Hi Darryl,

Thanks for reaching out.
The image can be fullwidth by setting that a background image of the Row element, just remember you may need to set the padding to the Row to add the height and width.
Please find a few articles on the fullwidth background image which can be helpful:

1. https://css-tricks.com/perfect-full-page-background-image/
2. https://www.w3schools.com/cssref/css3_pr_background-size.asp
3. https://www.w3schools.com/howto/howto_css_full_page.asp

Thanks

[darryl_corp]

Thank you for the reply,

I’ve tried playing around with background images but this doesn’t work well for me as it cuts and zooms in according to the screen used. On mobile for example it only shows the middle part. I can’t figure out the CSS or other settings needed for this option (I’m a non pro building a website by myself)

So I went back to the original settings, using an image element, and found some guidance here: Header image full width saying that this is the better way to go about it.

However, the problem seems to persist.

Somehow, on some iphones, and macbooks, the images don’t work well.

Do you guys hear this often? What’s the reason of it? See included screenshots.

Please help me out, I’m stuck.

Thank you in advance,
Darryl

[tristup]

Hi Darryl,

To make the image fullwidth, please add the following custom CSS code into the Image > Customize > Edit CSS. Please find the screenshot describing the settings below.

$el img
{
    width:100%;
}

To know more about how to use the Element CSS, please go through this article: https://theme.co/docs/element-css

Remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks

[darryl_corp]

Dear @tristup

Thanks a lot, I’ll give this a try on all images that give this problem and then see on then purge cache and see on the different devices what it looks like.

Is one of you still in my admin area? I see a new page added: test by themeco, and it’s still there.
Not sure what was done but please delete what was added for testing.

If it’s the whole test page i can delete that safely?

Thanks

[tristup]

Hi Darryl,

The page is created just for testing the solution in your environment and keep that for your reference only. You can delete it if you want so. And I have already logged off from your admin area, so there may not be anyone from our side.

Thanks

[darryl_corp]

@tristup

It works!! Awesome, I’m really really happy with this. Thank you so much

I followed the settings as per your test page, which was mostly to add the CSS on the image element. Now it works fine.

This just leaves one issue, which I believe is a completely different reason:

on some ios devices and in safari (but not always) some images don’t load. Like in the screenshot previously, it show’s a white box with error mark.

Would you know why this is?

Cheers,
Darryl

[prakash_s]

Hello Darryl,

I checked your website in iPhone 7 plus it seems that it is working fine at my end. I checked in both Safari and Chrome it is working fine. It might slow the internet network at your end.
Safari

Chrome

Thanks

[darryl_corp]

Dear @prakash_s

Yes, It’s not on all devices. That’s the strange thing. Some people are giving us this feedback, not sure why.

Here’s an example for desktop (macbook pro using safari) and mobile (Iphone 8 using safari) and these are different people in different countries on different continents so it’s def not the internet connection.

Cheers

[prakash_s]

Hello @darryl_corp

This could be the issue with a security setting Apple added to Safari several months ago. Please find more information from http://community.canvaslms.com/t5/Canvas-Basics-Guide/What-are-the-browser-and-computer-requirements-for-Canvas/ta-p/66
Although this issue is not related to our theme, we still want to help you with a few link that may help you :
https://blog.emojipedia.org/why-ios-is-spreading-question-mark-boxes/
https://discussions.apple.com/thread/251336063
https://www.youtube.com/watch?v=DefYuE0A6I0

Thanks

[darryl_corp]

yes, understand. just wanted to inform you guys as well. I know it’s a third party issue.

Thanks a lot for everything Themeco team!

Darryl

[ruenel]

You are most welcome Darryl!