Layered Images, Absolute Mode and Device Compatibility

[Chris_Cobb]

Hi there,

I’m new here so this may be a simple question.

I’m putting together a site that requires several images to be layered on top of each other. I’ve seen examples on how to do this and it requires the images to be set to Absolute mode. Otherwise they insist on aligning themselves side by side.

That would be fine, but it makes my goal of having his site work well across all devices very difficult. If I’m not using Auto for image placement, it simply doesn’t look correct on other devices.

Is there a better way to go about this that will maintain compatibility across all devices?

Thank you for your help,

Chris

[vincent (Webflow Expert)]

Can you share your preview link? Position:absolute is supported by every browser, desktop or mobile. There must be some configuration issues, there is no reason you can achieve that.

[Chris_Cobb]

Thank you Vincent. Yes I’m sure I’m doing something wrong at a higher level. Just not sure what.

Here is the preview link: https://preview.webflow.com/preview/chris-cobb-s-marvelous-site?preview=ceae81be9071ddfc95a47b955659759a

Thanks for your help!

[vincent (Webflow Expert)]

You have to adapt the design for each breakpoints, as you are using absolute values…

Here is what the process looks like https://v.usetapes.com/6iOHAFeAh7

[Chris_Cobb]

Wow, thanks for the super useful reply! So I wasn’t doing anything wrong per se, I just need to go into each device and place things appropriately.

Thanks very much! I’m glad its as simple as that.

Chris

[vincent (Webflow Expert)]

I just need to go into each device and place things appropriately.

Yes, starting by the upper, to the lower… everything you set for a lower breakpoint doesn’t affect the uppers but set the default for the lowers. So yes nothing was wrong, only unfinished

Sometimes you do something for desktop that’s so complex that it’s difficult or impossible to transfer for mobile. In this case, hide the whole section for devices, and create a new section, hidden for desktop, that has a different, simpler or more suitable behavior for mobiles.

[Chris_Cobb]

Hello. One more question related to this. I notice if I scale the browser window, anything that is set to absolute will not scale and, if the browser window is moved enough, the content will no longer remain contained within the viewport. This causes two problems.

1. Things need to look correct even if viewed on computers with varying resolutions.

2. It seems that if one asset is set to absolute, then all of them need to be or they will never maintain the correct spacing and size relative to each other. Is that correct?

As a reminder, I’m only using Absolute because it was the only way I could find that allowed me to have content overlap each other. But in the end, I need a website that scales properly. What is the best practice for this kind of situation?

Thanks very much,

Chris