I’m trying to create this layout in which I need the images to be position absolute so that I can have them stacked on top of eachother and overlapping. I’ve wrapped then a div (div block 2) which is inside a col div (using MAST framework). I did this so that I can change the settings of the div without messing with the col settings.
My issue is that neither div block 2 nor col are adjusting to the size of the images contained. As I go to different breakpoints, the images sit on top of the subsequent sections, instead of respecting the padding of the section and row in which they’re contained. This seems to be because of the position absolute - but position absolute seems to me to be the best way to achieve this layout. What would the best approach be here?
hi @jcoman you are correct position: absolute will take element out of standard flow. I you do not understand what this means I will recommend take lessons about CSS positioning to understand what you are asking.
you can chive some of it when you remove your currents class on each image _(image 5, image 6 …)_and start from scratch.
Set your wrapper to height: 100% and add class eg. hero-img to each of 3 images. Do not touch width (or set it to your 377px) and set only max-height: 100%. After add to each another class (eg. one, two …) and apply positioning and rotation on these.
Take this as very basic setup as I have no idea how your hero should look like.
Thanks so much Stan! Still getting my head around exactly how to work with absolute positioning—your comment helped a lot. Using CSS transform with %s rather than pixels (instead of adjusting with +/- margins) also seemed to work better for adjusting positioning at different breakpoints in my case, after redoing the section with your advice. Optimzied the images, too — thanks again!
