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
Bryce Eason
1,918 PointsFlexbox 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
31,246 PointsHi 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
1,918 PointsSigh...
Well, I feel dumb now -_-.
Bryce Eason
1,918 PointsOk, 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
31,246 PointsInstead 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
1,918 PointsI 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
1,918 PointsI 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.