I have a site which is bootstrap driven and the top row consists of 2 columns, each 50% wide.
When viewed in a mobile, these become 2 x 100% wide rows, with the right hand column sitting below the left hand one.
In the right hand column I have 3 images with transparent backgrounds layered on top of each other using position:absolute and z-index. This works well on desktops, but on the mobile device it causes problems as it merges into the row below.
I am guessing its the position:absolute that’s doing it but wondered if there was an alternative way of layering the images?
Hlforr, please set up the code that you’ve provided on a standalone working page and try it on your PC and see if it demonstrates the problem. It doesn’t.
If you can post a link to the site, or post a working page… starts with <doctype, ends with </html>, contains HTML and CSS secitons… we should be able to help.
The box containing the images is probably {position:relative} and should have a height specified. Objects that are position:absolute are removed from the flow of the page. The text below them would underflow them if their parent did not have a height (or space allowed for them using some other method). Perhaps the height is being removed with the media query kicks in.
The page allows the user to select a skirt, and will then go to another page to add a top etc.
The code works well with one image as it doesn’t need to be positioned absolutely, so I am thinking that the only solution might be to use the variables passed to such pages to construct an image using php, display it on the page, and then destroy it when the user moves to the next page.
Got it working finally. Decided the best solution was to layer the images then merge them using php. Because I then don’t need the position:absolute it works fine.
Thanks everyone for your replies.