Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Dan Avramescu
Dan Avramescu
11,286 Points

Troubles with Flexbox and Transformation divs

HI guys,

I'm havving issues when trying to combine what i've learned(seems not well enough) from flexbox and transitions.

I have a two column layout for my "main" div (on 1025px+ media query) and a secondary div "second" that holds 3 rotating cubes. problem is i can't seem to get the flexbox description right for the "second" div so that it moves to the right side of the "main" div.

So basically what i'm trying to do on 1025px+ resolution is have two columns with text taking 60% of the device screen width and , sepparated by a 2px margin, a third column containing the rotating cubes.

right now the two columns are where i want them to be, but the third column that should go on the right side of the screen is below the "main" div.

here is a short piece of the html:

<div class="main">
      <div class="primary col">
        <h2> Welcome! </h2>
        <p> text</p>
      </div>
      <div class="secondary col">
        <h2> Ride! </h2>
        <p>text</p>
      </div>
    </div>
</div>
    <div class="second clearfix">
      <div class="cube-container"></div>
        <div class="photo-cube">
          <img class="front"src="img/test.jpg" alt="">
          <div class="back photo-desc">
            <h3> Ride4life</h3>
            <p> a ntante dizemane pedi zenamec mpanean tante</p>
            <a href="#" class="button">Download</a>
          </div>
          <img class="left"src="img/test.jpg" alt="">
          <img class="right"src="img/test.jpg" alt="">
        </div>

and flexbox CSS:

body {
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.row {
  flex:1;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width:667px) {

  .main-header,
  .main-nav,
  .main, .second, .col {
    display:flex;
  }

  .main-header {
    flex-direction: column;
    align-items:center;
  }
  .col {
    flex: 1 25%;
    flex-direction:column;
  }

  .main {
    flex-wrap:wrap;
  }

  .second {
    flex-wrap: wrap;
    }

  .button {
    margin-top: auto;
    align-self: flex-end;  
  }
}

@media (min-width:1025px) {


  .main-header {
    flex-direction: row;
    justify-content: space-between;
    padding: 10px auto;
    height: 100px;
  }
  .col {
    flex: 1;
    flex-direction: column;
  }
  .main {
    max-width: 60%;
    flex-direction:row;
    padding-right: 20px;
    margin: 0 15px 0 15px;
    border-right: solid 3px #264040;
    border-radius: 1px;
  }
  .second,  {

    max-width: 30%;
    flex-direction: row;
    flex-flow:wrap;
   }

  .cube-container {
   }


}

Hope u guys can help me figure this out.

Thanks!

3 Answers

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi,

Is it possible to see a live version of this? So maybe codepen or a workspaces snapshot?

I am more than happy to give this a blast and get it working if so? Can even do a colab mode on codepen if you have an account?

Craig

Dan Avramescu
Dan Avramescu
11,286 Points

hey Craig! That would be awesome.

Here's the pen link. (i'm new to everything so i hope it works and you can show me where i went wrong or, maybe even tell me how i can make the code more efficient) https://codepen.io/abreski/pen/qavXJB

Craig Watson
Craig Watson
27,930 Points

Hi Dan

If you follow this link

https://codepen.io/Craig-Watson/professor/VKRzRa/

You should be able to chat to me on codepen and we can get things moving :)

Craig

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Dan,

Was good to get talking with you earlier,

Below is a snapshot of the pen in workspaces after I cleaned it up...

https://w.trhou.se/p9hhngj9sy

Hope this has been helpful.

Craig :)

Dan Avramescu
Dan Avramescu
11,286 Points
Dan Avramescu
Dan Avramescu
11,286 Points

Craig Watson , thanks again, you've been very helpful! You worked magic on that disorganised code!