How can I have the hero image be display full width without cropping on both sides?
this is the media query Im currently using. I'm not an experienced coder:
@media (min-width: 768px) and (max-width: 1024px) {
#hero-section {
background-size: cover !important;
background-position: center top !important;
height: min(100vh, 150vw);
}
and this one so the image wont be zoomed in on larger tablet screens such as 1600 x 2560 Tablet
@media (min-width: 1025px) and (min-height: 1201px) {
.elementor-section #hero-section {
@media (min-width: 768px) and (max-width: 1024px) {
#hero-section {
background-size: cover !important;
background-position: center top !important;
height: min(100vh, 150vw);
}
and this one so the image wont be zoomed in on larger tablet screens such as 1600 x 2560 Tablet
@media (min-width: 1025px) and (min-height: 1201px) {
.elementor-section #hero-section {
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
