Elementor Pro Homepage Hero Tutorial
DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).
CSS Code
- select the hero section
- click on the Advanced tab
- then inside the Custom Css filed, paste the following code:
@media screen and (max-width: 767px) {
.my-main {
height:45vh!important;
}
.my-secondary {
min-height:13vh;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.my-main {
height:50vh!important;
}
.my-secondary {
height:25vh;
}
}
@media screen and (min-width: 1025px) {
.my-secondary {
height:50vh;
}
}
Your turn!
I hope this tutorial will help you make your future websites even more beautiful, with Elementor Pro!
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you anything!
Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.
So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
| 
