How can I fix the gradient display issue on mobile for the Sense Theme?

Store Design
1

I have a gradient with many colors on the image with text section. It looks great on desktop but is not displaying correctly on mobile. I have it set to not have content overlap. When I add the below code to the bottom of the theme, the gradient applies to both the image and content section so it stacks one gradient on top of the other instead of having one gradient over the entire section (it creates 2 gradients for each part of the section instead of one). I want the gradient to cover the entire image with text section vertically on mobile like it does horizontally on desktop. Please assist.

@media screen and (max-width: 749px) {
  .gradient{
	background-attachment: local !important;
  }
}
2

The image I use in this section has a transparent background which is why the gradient needs to flow over into the image section smoothly instead of breaking up into 2 gradients.

3

Hi @OlivianAnn did you manage to resolve this?