CSS Header Height Changes Width

Question

So, I am developing my first responsive website, and I already had a small problem that I cannot solve.

As you can see at https://jsfiddle.net/n9xh4cLm/1/ , there is a main container that partially overlaps the header image. When you change the border width, all elements are sized down, but the main container no longer overlaps the title bar. Is there a way to set the height of the title, say, the 75%image of the title, which is responsive?

Answer 1

Well, if you make a responsive site sooner or later, imho, you may need to enter media queries.

So this is what I would do in your case. Something like adding:

@media (max-width: 900px) { 
header {height: 70px;}
}
@media (max-width: 700px) { 
header {height: 50px;}
}
@media (max-width: 400px) { 
header {height: 30px;}
}

change the various steps to any window width in which your title will be smaller.

JSFIDDLE

Answer 2

You can use the value of viewport instead of ems, pxs or pts.

1vw = 1% of the width of the viewport

1vh = 1% of viewing height

1vmin = 1vw or 1vh, whichever is less

1vmax = 1vw or 1vh, whichever is greater

In your case try this

.responsive img {
    height: 100%;
}

Demo here