The section gradient is displayed separately from the global page gradient

[yurilazer]

With a global color gradient in the site theme, the color of each section is displayed normally, only the gradient of the component-image-with-text section displays the global set gradient separately inside the section, how to fix it:

website: https://healthsphere.store/

[tim_tairli]

All other sections have classes “color-background-1 gradient” in their wrapper element, this one does not.

These classes set background properties.

So you can either add an extra wrapper to section content with these classes or add these classes to section “class” attribute under section schema.

[yurilazer]

Thank you for your support!

I tried adding a css variable to the theme’s visual editor, but this is what I get:

and also through the browser framework:

please tell me - do I need to make an edit related to “color-background-1 gradient” in the file “component-image-with-text.css”?:

[tim_tairli]

Yes, somehow adding these classes to existing ‘.image-with-text’ element (like in second last of your screenshots) inside the section does not work.

You need to either wrap it with another element or add these classes to the section element – you can try adding these classes to the <div … class=“shopify-section section” in devtools:

• currently

• classes added to the section element:

Go to your section liquid file and change from:

{% schema %}
{
  "name": "t:sections.image-with-text.name",
  "class": "section",
  "disabled_on": { ...

to

{% schema %}
{
  "name": "t:sections.image-with-text.name",
  "class": "section color-background-1 gradient",
  "disabled_on": { ...

[yurilazer]

Thank you friend!