How to get rid of the space between content rows when making a page responsive?

0

Issue

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

Solution

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.

https://codepen.io/Jason_B/pen/dmzpmq

Answered By – JasonB

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More