Trying to achieve this boxes structure

[aslamdoctor]

Hey guys,

I am trying to achieve a structure like below on a webpage
https://www.figma.com/file/NfikH1inSqCgwXOSzb3VeDCW/Untitled?node-id=0%3A1

So the full width is max width 1600px. Problem is, making it responsive has become very complex.
Reason is, all the boxes are given width in percentages.
So first whole section is divided in 2 parts 50% left – 50% right.
Inside 50% left – I have added 4 images by giving 50% width
Inside 50% right – I have added 1 image by giving 100% width

If we use just images in this structure, it stays very responsive if I reduce the screen size.
But as there are texts added BELOW each images, the box that contains the text has fixed height (66px). When we reduce the screen size, this disturbs the layout responsiveness.

Any solution to make it proper responsive?
I tried making the text box as an overlay to the image, so position absolute bottom of the image which fixes the issue but then the bottom part of the image goes behind the text box.
I want to make sure the image stays full visible and the text box also stay below it.

Any thoughts? I am happy to use JS too if there is a good solution.

[uxfed]

My first instinct is to say we’ll need to see some actual code, like a codepen because it’s hard to gauge your problem based on a figma design.

One thing that jumps out is your layout has a lot of percentages but your text has a fixed width of 66px for some reason? I’d make the text 100% the width of its container.

[aslamdoctor]

Its OK, I figured it out.
Here is the code :)

https://codepen.io/aslamdoctor/pen/ZNpWdr

[Author]

Posts