Grow your CSS skills. Land your dream job.

What is wrong!?!?

  • # June 21, 2013 at 9:32 am

    Hi guys

    Just following a tutorial on YT about responsive design, just wanting to get a bit more comfortable with media queries.

    The guy who made the video doesn’t really understand classes really, he has 3 individual ‘modules’ on the right hand side of the page and he names them ‘sidebar-top’, ‘sidebar-middle’ etc, so I made a class called ‘sidebar-module’ for all 3 as the styles are exactly the same.

    I can’t get the sidebar modules to go inline with the top left blog post modules and it’s driving me crazy!!

    Any have a look please, here is the [codepen](http://codepen.io/Watson90/full/uotlv “”).

    Thanks

    # June 21, 2013 at 9:46 am

    It’s expected that the right modules line up there, really.

    The first left module is floated left.
    Then the second left module comes in the code. But since it won’t fit next to the first module, it ends up under it.
    Only then the first right module comes in, and so it’s placed next to that second left module.

    You might want to place the left modules in a wrapper and give that one a float:left and width of 70%, something like this: http://codepen.io/senff/pen/Bodky

    # June 21, 2013 at 9:46 am

    [Forked Pen](http://cdpn.io/ngacx “Forked”)

    Few changes. In your css, split your content-module like this:

    .content-module {
    width: 70%;
    float: left;
    }
    .content-module article{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fff;
    padding: 3% 5%;
    margin: 0 0 2% 0;
    }

    Then combine both articles into one content-module div. Fixed it right up.

    # June 21, 2013 at 9:47 am

    >The guy who made the video doesn’t really understand classes really,

    Should have been your first clue… :)

    # June 21, 2013 at 9:50 am

    Dammit! I was close haha, thanks everyone…

    # June 21, 2013 at 9:53 am

    > The guy who made the video doesn’t really understand classes really, he has 3 individual ‘modules’ on the right hand side of the page and he names them ‘sidebar-top’, ‘sidebar-middle’

    Maybe he just did that to clarify things, it is a tutorial after all…

    # June 21, 2013 at 4:54 pm

    > Maybe he just did that to clarify things, it is a tutorial after all…

    I always start yelling “omg newb double-you-tee-ef” when they do something wrong in a tutorial, but then they fix it later saying something like “oh, but this is the wrong way to do this, let’s do it right now”… at least give me a heads up -_-

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".