What is wrong!?!?

[Watson90]

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

[Senff]

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

[webtmc]

[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.

[Paulie_D]

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

Should have been your first clue… :)

[Watson90]

Dammit! I was close haha, thanks everyone…

[Senff]

> 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…

[Author]

Posts