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 Qori Mayu
Qori Mayu
2,514 Points

Layout / positioning issue re: margin

Hi

I'm having a bit of a challenge trying to get a layout idea to work how i'd like it to.

I'm experimenting with the code for one of the flexbox tutorials in the CSS deep dive trying to see what I can control with the skills i've learned so far.

Here's where I'm at so far:

http://cdpn.io/idjIB

(feel free to adjust the width of the browser window to see how it responds)

I'm trying to get the column on the left hand side (in the case before the 'breakpoint is reached, "Column A" and ALL 'columns' AFTER the breakpoint is reached) to line up with the navigation bar as it does on the right hand side. I decided to put the columns into 'grids' attempting to copy the code of this lovely example where he's managed to line everything up beautifully:

http://philipwalton.github.io/solved-by-flexbox/demos/grids/

It hasn't worked out quite as well in my case as you see (the left hand column as I mentioned before) and I'm not expert enough yet to know how to fix it or if I'm doing something completely wrong.

Do you have any advice?

Thanks in advance

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I just spend a few minutes changing my view port, and I'm still not sure exactly what isn't working right. Maybe a screen shot of an example of what you are trying to get it to do would help.

3 Answers

Qori Mayu
Qori Mayu
2,514 Points
Qori Mayu
Qori Mayu
2,514 Points

Cheers, James.

Here is the issue (the arrows indicate where I'd like the column on the far left to go): Imgur

Here is the result i'm looking for (the line shows where it should line up to: Imgur

Hopefully the code in Codepen is clear -I've had to combine 2 separate style sheets I was using as Codepen only lookalike it will let me display one column of css

Thanks

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Change this: .Grid-cell { padding-left: 1em; }

to this: .Grid-cell { padding: 1em; }

Qori Mayu
Qori Mayu
2,514 Points
Qori Mayu
Qori Mayu
2,514 Points

Thanks again, James. What your suggestion produces is this: Imgur , creating a space at the end of the last column and now extra space between the middle columns. I really want to master this just like the boxes in http://philipwalton.github.io/solved-by-flexbox/demos/grids/

The above link is where I actually tried to copy the css from but it wasn't too clear and hasn't seemed to work out too well. I'm sure I'll crack it in time just looking to see if anyone knows how to do it

Cheers