Disabling parallax section background images for phones

[bongobrian]

Hi,
Is it possible to remove or disable the background images for parallax sections only for mobile phones? I have tried adding the css code below to the “small screen” and “extra small screen” custom css areas. The idea is to override the inline background-image style attributes that get applied when you set a background image to a parallax section:

.section-parallax[style] {
background-image: none !important;
}

This code works when I test it for “extra large screen (desktop)” but for some reason it doesn’t seem to work for the mobile phone breakpoints.
The reason I am doing this is because the background images usually end up getting cropped in a weird way and just shows part of the image (which ends up looking sloppy and like it’s a mistake) so I figured I would try to remove the parallax backgrounds altogether for phones.

Here is the link to the site, and it’s the parallax sections on the homepage that I am working on:

Home: Parallax

Any ideas or suggestions are much appreciated.

Thanks,
Brian

Ticket