I have created a layered illustration on my about page. At the tablet breakpoint the image adjusts correctly, and as per the designer/preview in Safari (right below). However, in Chrome, the background image is suddenly much smaller (left below). Any ideas on what is causing this glitch?
For some reason Safari and Chrome treat flex elements differently and I saw that you’re using flex to display the image, my recommendation here would be to access the designer through Safari and modify that image to your liking. This should fix the issue.
Hi Aaron, thank you. So, I guess you mean to change it from flex to display?
I have done this, and used absolute positioning for the landscape within. This works okay, but unfortunately makes it harder for me to keep the horizon in view in the image. Any thoughts for how to keep the horizon in view?
And what is it that Chrome does differently? I notice all my other images built this way are okay.
It’s not Chrome but Safari, Safari handles flex elements different and doesn’t recognises the height of a parents element to set the heigh of that specific element.
The selection box shows it is 100% width. But, the image contained within is only a fraction of the size. Unfortunately, I cannot see anyway to modify this, as I can’t see what is causing this behaviour.
Hi Aaron, I ended up using that solution. Thank you. Originally I think I hoped to keep the Illustration Backgrounds separate. But, at this point, I just needed a fix.