Finally i solved with this code because even using the correct Scale property of Mozilla the .banner-head item and banner-content-bottom become very separated.
@media only screen and (max-width: 767px) {
.banner.responsive-fonts .banner-content .content-inner > p {
zoom: 1;
}
}
.banner.responsive-fonts .banner-content .content-inner > p {
margin-bottom: 25px;
}
@media only screen and (max-width: 500px) {
.banner-head {font-size: 28px !important;}
.banner-content-bottom {font-size: 24px !important; }
}
@media only screen and (max-width: 500px) {
.banner-head {margin-bottom: 30px !important;
margin-top: 20px}
.banner-content-bottom {margin-bottom: 30px !important; }
}
