Resizing Hero element on mobile not working

[Erich Fisher]

Hi,

I’m building a new website and I am trying to use CSS to adjust the Hero image size on mobile devices, but it’s not working. Here is the code I am trying to use:

@media screen and (max-width: 767px) {
.wp-block-obb-hero-block {
max-height: 260px;
min-height: auto;
}
}

@media screen and (max-width: 1024px) {
.wp-block-obb-hero-block {
max-height: 480px;
}
}

When I add the CSS, nothing happens on any mobile device so I’ve stepped back to systematically test the code. For example, to test the hero-block object name, I removed @media screen to adjust the block on desktop (that worked). Then, using @media screen I tried different variables. If I use max-width: 200px, for example, then the hero block on mobile is long and skinny, so that works too.

The problem is resizing the image in the hero block itself on mobile. I’ve tried max-height, max-width, object-position, and object-fit variables. However, I see no changes in the hero image on mobile (which remains massively zoomed in).

Am I adjusting the wrong thing? Is .wp-block-obb-hero-block only for the block and not the image inside?

I’ll update if I figure this out, but in the meantime, I would really appreciate some help.

As always, thanks so much!

Erich

[David Morgan]

Hi Erich,

Thanks for reaching out. If you’re trying to adjust the size of the image in mobile, your CSS likely needs to target the background-image and/or background-attachment properties in CSS for mobile.

Can you please provide a link to your page with the Hero Block added, and we can provide a more accurate CSS solution?

Thanks!

[Erich Fisher]

Hi David,

Apologies for the delayed response. The website is https://wholehealthbaby.com/

The issue concerns the parallax option in the Hero block. When I enable that on desktop for the parallax effect, the background image and effect look great. On mobile, however, the image is zoomed in so much you can barely make out the background. I tried to use custom CSS to change the hero block size on mobile, but nothing works.

The only workaround I have found (and am currently using) is to disable the parallax effect on desktop. On mobile, the image is placed correctly and looks just find. I’m happy with this solution, but I would have liked the parallax effect. Let me know what you think. If there’s no easy solution then I’m happy to keep parallax off.

Cheers,

Erich

[David Morgan]

Hi Erich,

No worries. What version of the STAX theme do you have installed? Also, what version of the Organic Blocks plugin do you have installed?

I feel like this issue may have been addressed with an Organic Blocks update. However, you should be able to fix the issue in mobile by adding the following style:

@media screen and (max-width: 768px) {
  .obb-hero {
    background-attachment: scroll !important;
  }
}

I hope this helps.

Thanks!

[Author]

Posts