Pro header responsive height

[Lyser]

Hello, i would like the header to change height between breakpoints.

defaut header height is 350 :

i used this code :

@media (min-width: 980px) and (max-width: 1199px) {
.hauteur-header {max-height:300px; !important}
}
@media (min-width: 768px) and (max-width: 979px) {
.hauteur-header {max-height:300px; !important}
}
@media (min-width: 481px) and (max-width: 767px) {
.hauteur-header {max-height:250px; !important}
}
@media (max-width: 480px) {
.hauteur-header {max-height:250px; !important}
}

Put the classe here :

It’s not working, what did i do wrong ?

[kory]

Howdy @Lyser!

Thanks for writing in! The CSS you have shared above should work if you change max-height to height. Additionally, another technique you could explore would simply be to set the header’s height to auto, and then you could use some screen dimension CSS units to continually update your header’s height based on screen size (just another thought if you want to explore it).

Cheers!

[Lyser]

Thx Kory,

I have changed max-height to height and tried your technic, the header is responsive on posts but disappear on homepage, i don’t understand why… Also, the 2 px orange bottom border disappear on posts…

the css has been updated to this :

.hauteur-header {
  height:350px !important;
}
@media (min-width: 980px) and (max-width: 1199px) {
  .hauteur-header {height:300px !important;}
}
@media (min-width: 768px) and (max-width: 979px) {
  .hauteur-header {height:300px !important;}
}
@media (min-width: 481px) and (max-width: 767px) {
  .hauteur-header {height:250px !important;}
}
@media (max-width: 480px) {
  .hauteur-header {height:250px !important;}
}

How to have same responsive header on posts and homepage ?

[ruenel]

Hello @Lyser,

Your custom CSS is valid and correct. It is not working in your homepage all because of your custom inline element CSS added in the section element. You have added this:

$el {
  background: rgba(93,50,194,1);
  background: -moz-linear-gradient(top, rgba(93,50,194,1) 0%, rgba(87,85,195,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(93,50,194,1)), color-stop(100%, rgba(87,85,195,1)));
  background: -webkit-linear-gradient(top, rgba(93,50,194,1) 0%, rgba(87,85,195,1) 100%);
  background: -o-linear-gradient(top, rgba(93,50,194,1) 0%, rgba(87,85,195,1) 100%);
  background: -ms-linear-gradient(top, rgba(93,50,194,1) 0%, rgba(87,85,195,1) 100%);
  background: linear-gradient(to bottom, rgba(93,50,194,1) 0%, rgba(87,85,195,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d32c2', endColorstr='#5755c3', GradientType=0 );
  ]

The closing bracket is incorrect ] which should be }. Kindly edit and update it because that incorrect closing bracket affect the rest of the page’s custom styling.

If you need anything else we can help you with, don’t hesitate to open another thread.

[Lyser]

Everything’s fine now, thx ruenel ! =)

[christian]

You’re welcome, @Lyser.