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
Ashley Elson
Front End Web Development Techdegree Student 5,972 PointsI'm not sure why its giving me more of a gap on the portfolio on certain screen sizes.
Okay so I am doing the Responsive Project on the Techdegree and I am not sure why it is giving me more of a gap in certain places. I'm am doing the Tablet part. We are suppose to do mobile, tablet and desktop versions but on some width sizes it seems to go below sometimes and I have no idea why. It also happens on screens above 1024px wide but only sometimes.
Here the a picture of the problem: https://gyazo.com/62bf9a62c121e56ee9d4823d38624b0e And heres the link to the project on github: https://github.com/ashleye1995/ResponsivePortfolio/
2 Answers
Annet de Boer
900 PointsIt's the size of the content, to be more specific: the amount of words you have in "Marketing page" and "Social Network". If you add more words (1 full scentence to Marketing Page and 2 scentences to Social Network) the alignenment is just fine. Maybe you can solve it using a min-height of the text blocks or 'hack' it by adding a transparent img of 1px width and <desired height> height (although that last solution is a bit ugly, I agree ;-)
Annet de Boer
900 PointsOr, the amount of words in "Video Player" instead of "Social Network" now I look at it again; anyways, there is something with the height of the text blocks, that's the problem.
Ashley Elson
Front End Web Development Techdegree Student 5,972 PointsI've tried adding the min-height but it still happens and I would rather not do the 'hack'. If I wrap the paragraphs in divs and size the divs do you think that will work?
Annet de Boer
900 PointsWas your min-height 'high enough'? Otherwise it wouldn't make a difference on the layout. Try making it really high to see if it actually does something.
You could definitely try to size the parent divs instead. Also, I'm guessing you do not want one of them to be larger than the others so I guess you could put in a static height anyways. So instead of 'min-height' just 'height'.
The hack is actually based on the css trick called 'faux columns'; (if you google it you'll find it) but I just found a pretty neat alternative to it using gradient backgrounds, haven't used it myself but maybe it helps you: https://css-tricks.com/fluid-width-equal-height-columns/
Ashley Elson
Front End Web Development Techdegree Student 5,972 PointsI will try this out soon as I am really busy recently. I will let you know how it goes though!
JongHo Kim
8,313 PointsJongHo Kim
8,313 PointsIt's probably because the paragraphs of adjacent lists do not have the same number of lines.