1

I have tried adapting this post and its alistapart links. But I can't get my three blocks in a container to act responsively and maintain their aspect ratio

<div class="hpGridTopRow">
  <span class="hpBox lightBlue one">
    <p class="hbBoxesp">New to Restore</p>
  </span>
  <span class="hpBox green two">
    <p class="hbBoxesp">Events</p>
  </span>
  <span class="hpBox midBlue three">
    <p class="hbBoxesp">Talks</p>
  </span>
</div>

I need them to arrange themselves to the borders of the hpGridTopRow div so I am using flex - and its working well.

However, the layout has to be responsive - the aspect ratio of the containers needs to stay fixed as their widths change.

Here's the css

.hpGridTopRow, 
.hpGridBottomRow {
display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    padding-bottom: 20%;
    height: 0;
    overflow:hidden;
    background:yellow;
}
.hpBox {    
    width:24.18803418803419%;
    text-align:center;
    height:264px;
    height:100%;
}

.hpBox.one {
    width:49.4017094017094%;
}

.lightBlue {
    background:#15b2d2;
}
.green {
    background:#8cc63f;
}
.midBlue {
    background:#6a8aa8;
}    
.hbBoxesp {
    color:#fff;
    margin-top:40px;
}

I have created a jsfiddle - as you can the container background shows, but not the actual boxes and said container is behaving responsively.

How can I get the spans to behave properly?

Community
  • 1
  • 1
maxelcat
  • 1,333
  • 2
  • 18
  • 31
  • 1
    Ouch, that fiddle just burnt my eyeballs! – Pete Jan 19 '17 at 10:49
  • thanks for your helpful comment Pete. – maxelcat Jan 19 '17 at 12:05
  • If you are going to create an example, then do something that we can work with - it took me 30 minutes before I could see properly again. With it being that bad I just moved on and I'm guessing I'm not the only one - so perhaps that something to keep in mind for future examples. – Pete Jan 19 '17 at 12:14
  • well I like the colour, and I have an answer. Just think you should have just moved on... but I will take on board what you say re colours. – maxelcat Jan 19 '17 at 12:16
  • have a sense of humour - someone like it :) – Pete Jan 19 '17 at 12:18

1 Answers1

1

I've removed those extra colors and simplified the percentages to simplify the code.

The idea is that I've added position: relative; to the parent and position: absolute; to the children. This ensures that the children positions are bounded to the parent.

I've also added top: 0; bottom: 0; to the children, to make the children span spans the height as the parent div.

Then you have to place the spans in the correct places by using left and right positioning.

.hpGridTopRow {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  padding-bottom: 20%;
  height: 0;
  overflow: hidden;
  background: yellow;
  position: relative;
}
.hpBox {
  width: 25%;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
}
.hpBox.one {
  width: 50%;
}
.hpBox.two {
  left: 50%;
}
.hpBox.three {
  right: 0;
}
.lightBlue {
  background: #15b2d2;
}
.green {
  background: #8cc63f;
}
.midBlue {
  background: #6a8aa8;
}
.hbBoxesp {
  color: #fff;
  margin-top: 40px;
}
<div class="hpGridTopRow">
  <span class="hpBox lightBlue one">
    <p class="hbBoxesp">New to Restore</p>
  </span>

  <span class="hpBox green two">
    <p class="hbBoxesp">Events</p>
  </span>

  <span class="hpBox midBlue three">
    <p class="hbBoxesp">Talks</p>
  </span>
</div>
Nelson Yeung
  • 3,262
  • 3
  • 19
  • 29
  • thanks for the snippet - and your helpful explanation - looks better. Does this mean that I can't use flex layout because the spacing is now wrong - – maxelcat Jan 19 '17 at 12:02