I am working on my first portofolio project (I'm taking a course on Udacity). I have studied a bit about Responsiveness lately, but I'm having a hard time wrapping my head around it and understanding which is which (flexbox/ grid system). Therefore, I'm not even sure what I used by now. Grid? Flexbox? I'm completely confused.
The problem I'm currently facing is how to get rid of spaces between content rows when making the page responsive (for example when the viewport is smaller than 1200px, the gap between my main image and the rest of the content gets HUGE). Please help me.
Here's my code overall: https://codepen.io/antobloop/pen/LdjZmW
@media screen and (max-width: 1250px){
body {
???
}
}
And here's what im talking about: Gap between content
You have a 600px height set on the .image so when the page gets more narrow, the image fills the top portion and you see a gap in the empty space.
I changed styles on .image from
height:600px;
to
height: 0;
padding-bottom: 56.25%
This is a little trick to maintain the 16:9 aspect ratio on the container that sets the overall height based on the width of the parent container.