CODEWITHSUNDEEP
htmlcssflexbox
Jai Sandhu
Jai Sandhu

Reputation: 344

A responsive two column layout using flexbox

I have a two-column layout with bottom-aligned images and top-aligned captions. It works without using any JavaScript but I feel that structurally, text should be in the same cell as the image instead of on the next row. This would allow me to create a one-column on mobile without any extra markup.

How can I achieve it?

/* Global */
*{
  margin:  0;
  padding:  0;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after{
  box-sizing: inherit;
}

html, body{
  width:  100%;
  height:  100%;
  font-family: sans-serif;
}

img{
   display: block;
   width:  100%;
   height:  auto;
}

.left-col{
   width: 66.6%;
   background:  pink;
   padding-right: 30px;
}

.right-col {
   background:  mintcream;
   width: 33.3%;
   padding-left: 30px;
}

/* Site */
.site{
  display: flex;
  flex-flow: row nowrap;
  position: relative;
  width:  90%;
  left:  50%;
  transform:  translateX(-50%);
  border: 1px solid grey;
}

.site .left-col, .site .right-col{
   flex: 1 0 auto;
   display: flex;
   flex-flow: column nowrap;
}

.site .item {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
  <section class='site'>
      <section class="left-col">
         <section class="item"><img src="http://dazedimg.dazedgroup.netdna-cdn.com/786/azure/dazed-prod/1200/8/1208983.jpg" alt=""></section>
         <section class="item">One line of text</section>
      </section>
      <section class="right-col">
         <section class="item"><img src="http://dazedimg.dazedgroup.netdna-cdn.com/1280/azure/dazed-prod/1200/8/1208984.jpg" alt=""></section>
         <section class="item">Multiple<br>lines <br>of<br>text</section>
      </section>
   </section>

Upvotes: 0

Views: 2674

Answers (1)

Ovidiu Unguru
Ovidiu Unguru

Reputation: 756

From what I understood, instead of the two pictures being aligned inline, they should be aligned vertically when you are on mobile? If so..

You can use @media queries for that.

@media (max-width:760px) {
  .site {
    flex-direction: column;
  }
}

Example: ( lower resolution to 760px )

https://jsfiddle.net/aje90g9h/

Upvotes: 2

Related Questions