Thanks Hans.
I have been trying to get it right using this code
@media (max-width: 1400px) { .hero {padding: 800px 0 110px 0 !important;}
}
@media (max-width: 1200px) { .hero {padding: 700px 0 100px 0 !important;}
}
@media (max-width: 979px) {
.hero {padding: 400px 0 80px 0 !important;}
}
@media (min-width: 768px) and (max-width: 979px) {
.hero {padding: 400px 0 70px 0 !important;}
}
@media (max-width: 767px) {
.hero {}
}
@media (max-width: 480px) {
.hero {padding: 325px 0 220px 0 !important;}
}
Which works in most cases but NOT with 4.7 inch Iphones or an 21 inch MacBook (which happen to be of my client) although it works fine with my 15″laptop, my 17″screen or my 5″ Android Phone
If I for instance use max-width: 30000px
it completely transforms the website even for smaller screens.
Do you have an extra idea?