I believe I have found a (quite annoying) bug; when I use background gradients, these sometimes completely disappear on smaller devices; they appear fine on desktop, and then they are simply not visible for phones.
Said gradients appear in the designer just fine, even in the preview, but when I view the site on an actual device, the gradient just isn’t there.
The gradient in question is at the very bottom of the site, on the footer. If you view this section with the preview link on mobile, you’ll see the gradient appears, but the published site doesn’t show it (again, for mobile only).
Any ideas if this is an actual bug or am I doing something wrong? I hate using an absolute div with a background gradient on top of the section, that is just a bad work-around.
Thanks for the info, webdev, I didn’t know one could use codepen to debug!
However, this CSS feature is being used on the Hero section of this website (background image + gradient on top) and the gradient does appear for phones there.
Plus, this is not the first time this happens. I once had a site with different gradients on different sections and only 1 of them was not showing the gradient, even though they had all the same CSS feature pattern (again, background image + gradient).
Another thing; when I tilt my phone (phone landscape) it does show the gradient. It only stops showing on vertical viewports, even though the CSS on the vertical phone is being inherited from landscape phone (orange markers on Webflow, not blue).