Header image > Title

[Antoine]

Antoine

August 27, 2015 at 2:16 am

Hello,

I would like to copy the css styling used in the Kadence slider (here : *Login to see link for my page here : *Login to see link

I have tried with my code below, but I have 2 issues :
1. The font size of the title is not responsive
2. The title is at the top => I would like to have a vertical align at the bottom.

@media screen and (min-height: 851px) and (min-width: 993px) { /*DESKTOP*/
.titleclass { /* container du canvas */
height: 400px;
}
.page-header { /* container du texte */
padding: 0% 1% 3%;
text-align: left;
}
.kad-page-title { /* Titre - container */

 font-size: 40px;
font-weight: 400;
text-transform: uppercase;
padding: 8px 16px;
display: inline-block;
line-height: 1;
margin-bottom: 4px;
color: #ffffff;
text-shadow: none;
text-align: left;
background: rgba(32,145,205,1) !important;
}
}

@media screen and (max-width: 992px), (max-height: 850px) and (min-width: 993px) { /*TABLET - LAPTOP*/
.titleclass { /* container du canvas */
height: 250px;
}
.page-header { /* container du texte */
padding: 0% 1% 3%;
text-align: left;
}
.kad-page-title { /* Titre - container */

 font-size: 30px;
font-weight: 400;
text-transform: uppercase;
padding: 8px 16px;
display: inline-block;
line-height: 1;
margin-bottom: 4px;
color: #ffffff;
text-shadow: none;
text-align: left;
background: rgba(32,145,205,1) !important;
}
}

@media (max-width: 767px) { /*MOBILE*/
.titleclass { /* container du canvas */
height: 150px;
}
.page-header { /* container du texte */
padding: 0% 1% 3%;
text-align: left;
}
.kad-page-title { /* Titre - container */

 font-size: 20px;
font-weight: 400;
text-transform: uppercase;
padding: 8px 16px;
display: inline-block;
line-height: 1;
margin-bottom: 4px;
color: #ffffff;
text-shadow: none;
text-align: left;
background: rgba(32,145,205,1) !important;
}
}

Thanks for your help