The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trying to achieve this boxes structure

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #287673

    Hey guys,

    I am trying to achieve a structure like below on a webpage

    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.


    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.


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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.