I’m using the Blueprint Sidebar stack from Big White Duck @tav and I want some text in the main content and an image in the ‘aside’ that fills the space at all screen sizes, stacking on mobile. Example below:
In this example, I have simply used a background image in the overlay stack; this works well except it wont stack on mobiles because there is no actual content. At the breakpoint where it needs to stack, it simply vanishes.
However, if I drop an image stack in the sidebar (i.e. as content), the image doesn’t fill the space at all sizes. I can of course centre the image using a coloured background to tidy things up above and below - this looks reasonable but I would prefer to fill the spae even with the image cropping.
As per @TemplateRepo’s answer.
The equal height column will collapse without any content in it when the columns stack for mobile so you need to give it some height. There are many ways to do this but padding is the most flexible. Tip: if you use percentage padding then the height will be equal to a proportion of the width and you will maintain a desired aspect ratio for your image.
For example If you want it 16:9 then use 56% padding either top or bottom
(9 / 16) * 100
Great - thank you @TemplateRepo and @tav. I found the % option to be problematic in this instance because, at a level where it fits on large screen, the image was badly cut off on mobile. If it works for mobile, the image overlaps on big screen. I guess I would need to play with the image ratio and/or aside %. However, manually adding pixel padding top and bottom has worked perfectly. Thanks again.
I only meant to use the % padding on small screens once the columns have stacked and the empty one has collapsed.
If you use something like Blueprint then you can cancel the padding above the breakpoint - it is not needed once the columns are side by size. Keep it nice and simple
