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?
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.
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.
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.
Things need to look correct even if viewed on computers with varying resolutions.
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?
