Hello. So, I’ve got this relatively easy layout I’m setting up, but I’m obviously messing something up with the attributes (and/or misundertanding something).
Hopefully the attached images will be enough to give you the info you need. I’ve stripped away some of the non-relevant attributes, etc, and labeled each section.
So, it’s essentially two image blocks (each 1/2 the screen width) side by side, except in XS and SM screens, where they end up vertically stacked instead. Above it is essentially a spacer (using the VY attribute) to push that down to approximately the middle of the screen. Below the images is a full width row. There’s more elements, etc, but these are the relevant items for this issue.
The left element is a fixed size image (consider it a background/room image), and then there is a second, smaller image element that is to be placed on that image (putting an object ‘in’ the scene). That will be later animated (position).
The right element is a fixed size image, but is vertically smaller than the left image (it’s a title banner), and is to be vertically centered within its column.
So, all that is working fine… except the left side.
I’ve went through a number of different attribute combinations, so the one that I have attached is just the last one I have tried, not the only one (anc certainly not the ‘right’ one).
The assumption was that I would have the ‘background/room’ image set as Position: Absolute, and the ‘object’ image (that is placed over it) as Position:Relative… which works, yet brings other issues. Doing so takes the background/room image out of the flow (due to the Postion:Absolute), and makes the image extend beyond the containing column. Taking away the Position:Absolute causes the object image to be placed underneath (lower vertically, not in Z) the background/room image. So, it seems like a lose-lose!
I tried combinations of Fluid, and setting the div size, etc… but each combo seems to introduce some other issue.
I’m hoping someone can point out where I’m going wrong or indicate how this is best done. Although I’m quite comfortable with HTML/CSS/Bootstrap, I do sometimes get messed up in whether to put attributes within the image tag, or the containing column… and sometimes go in circles with ‘conflicting’ attributes.