Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Bryce Eason
Bryce Eason
1,918 Points

Flexbox and padding issues when no padding is applied, pushing layout to the next line

So, after watching the Flexbox course I decided to give it a whirl to see how I am with it and by far it's AMAZING over using floats, etc.

But I have one issue that I can't seem to fix. I'm trying to keep both columns 20% and 80% each and they were fine, but when I forced a "min-width: X%" on each column to take care of the issue of the 20% column shrinking the 80% column gets pushed to the next line. I've been looking at my code for a bit now and I just can't find what is causing this to happen.

The last time I had an issue it was a minor issue regarding padding values (on my navbar), so I feel this is something minor but can't place my cursor on it (get it, instead of finger, cursor lol).

Anyways, here is the live preview of the site and code:

https://rbeason.github.io https://github.com/rbeason/rbeason.github.io/blob/master/css/main.css

And if you see another way I could achieve what I'm trying to do in a cleaner way let me know, it's always good to know multiple ways of doing something.

Thanks!

5 Answers

Joel Bardsley
Joel Bardsley
31,242 Points

Hi Bryce, I think you'll kick yourself - you've not applied box-sizing: border-box in your css. As it's defaulted to content-box, the padding is not included in the 80% width of your right hand box, so it gets pushed onto a new line.

Bryce Eason
Bryce Eason
1,918 Points

Sigh...

Well, I feel dumb now -_-.

Bryce Eason
Bryce Eason
1,918 Points

Ok, so another question, this is mainly more just decision not really markup related, but is this a good practice for spacing on my content side?

.container:nth-child(1) { margin-top: 100px; }

So that only the first container gets the 100px spacing from the top of the browser and not have 100px of spacing between each container? Or is there a better way to achieve this?

And does it seem to wide on larger screens or will that illusion be fixed when I get to actually applying a nice font to everything?

I made the mistake of doing the desktop site first so now my media queries are going to have to be for mobile and tablet now -_-.

Joel Bardsley
Joel Bardsley
31,242 Points

Instead of nth-child(1), you could use .container:first-child for some extra clarity, but personally I'd probably add padding-top to the parent section of the containers instead.

I'm only using a MacBook Air so can't comment on particularly wide resolutions, but it looks ok at fullscreen on this (1440px wide). I think any wider and the paragraph under the subheadings will tire out some eyes!

Bryce Eason
Bryce Eason
1,918 Points

I think once I get the fonts settled in it will look better. I'm just worried about ease of readability due to it being resume-ish.

I'll play around with padding-top and such to see which would be better.

Bryce Eason
Bryce Eason
1,918 Points

I just added some more content to test scrolling and I had to add a "padding-top: 350px" to my left side to get it from centering using the justify-content: center property. Surely there is a better way of doing this isn't there?

Changed the font up a bit as well.