Having Colour Issue in Rich Text Section on my theme

Hello

Please Find the attached Reference Images

In my Rich Text box in the Content Section i am seeing an White box.. I need to get rid of the same..

how can I do this.. tried few steps still no solution

Page View

Design View

And my Theme Section Liquid file
File Name under Sections/Rich-text.liquid

{%- if section.settings.section_title != '' or section.settings.section_sub_title != '' -%}
{% render 'section-heading' %}
{%- endif -%}
{{ section.settings.rich_text_handle }}

{%- render ‘section-style’ -%}

{% schema %}
{
“name”: “Rich Text”,
“settings”: [
{
“type”: “header”,
“content”: “Section Heading”
},
{
“type”: “textarea”,
“id”: “section_title”,
“label”: “Section Title”,
“default”: “Section Title”,
“info”: “Use Tag for Highlight text”
},
{
“type”: “textarea”,
“id”: “section_sub_title”,
“label”: “Section Sub Title”,
“default”: “// Sub Title”
},
{
“type”: “select”,
“id”: “heading_style_handle”,
“label”: “Heading Style -”,
“options”: [
{
“label”: “Style (One)”,
“value”: “style_one”
},
{
“label”: “Style (Two)”,
“value”: “style_two”
}
],
“default”: “style_one”
},
{
“type”: “checkbox”,
“id”: “heading_left_position”,
“label”: “Heading position in left”,
“default”: false
},
{
“type”: “header”,
“content”: “Rich Text”
},
{
“type”: “richtext”,
“id”: “rich_text_handle”,
“label”: “Content”,
“default”: “

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.


}
],
“blocks”:[
{
“type”: “section_padding”,
“name”: “Section Padding”,
“limit”: 1,
“settings”: [
{
“type”: “header”,
“content”: “Large/Desktop Device”
},
{
“type”: “range”,
“id”: “section_padding_top”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Padding Top”,
“unit”: “px”,
“default”: 0
},
{
“type”: “range”,
“id”: “section_padding_bottom”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Padding Bottom”,
“unit”: “px”,
“default”: 100
},
{
“type”: “header”,
“content”: “Tablet Device”
},
{
“type”: “range”,
“id”: “section_padding_top_md”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Padding Top”,
“unit”: “px”,
“default”: 0
},
{
“type”: “range”,
“id”: “section_padding_bottom_md”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Padding Bottom”,
“unit”: “px”,
“default”: 80
},
{
“type”: “header”,
“content”: “Mobile Device”
},
{
“type”: “range”,
“id”: “section_padding_top_xs”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Padding Top”,
“unit”: “px”,
“default”: 0
},
{
“type”: “range”,
“id”: “section_padding_bottom_xs”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Padding Bottom”,
“unit”: “px”,
“default”: 60
}
]
},
{
“type”: “section_margin”,
“name”: “Section Margin”,
“limit”: 1,
“settings”: [
{
“type”: “header”,
“content”: “Large/Desktop Device”
},
{
“type”: “range”,
“id”: “section_margin_top”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Margin Top”,
“unit”: “px”,
“default”: 0
},
{
“type”: “range”,
“id”: “section_margin_bottom”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Margin Bottom”,
“unit”: “px”,
“default”: 0
},
{
“type”: “header”,
“content”: “Tablet Device”
},
{
“type”: “range”,
“id”: “section_margin_top_md”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Margin Top”,
“unit”: “px”,
“default”: 0
},
{
“type”: “range”,
“id”: “section_margin_bottom_md”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Margin Bottom”,
“unit”: “px”,
“default”: 0
},
{
“type”: “header”,
“content”: “Mobile Device”
},
{
“type”: “range”,
“id”: “section_margin_top_xs”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Margin Top”,
“unit”: “px”,
“default”: 0
},
{
“type”: “range”,
“id”: “section_margin_bottom_xs”,
“min”: 0,
“max”: 150,
“step”: 5,
“label”: “Margin Bottom”,
“unit”: “px”,
“default”: 0
}
]
},
{
“type”: “section_background”,
“name”: “Section Background”,
“limit”: 1,
“settings”: [
{
“type”: “image_picker”,
“id”: “section_bg_image”,
“label”: “Background Image”
},
{
“type”: “color”,
“id”: “section_bg_color”,
“label”: “Background Color”,
“default”: “#EBEBEB
},
{
“type”: “color_background”,
“id”: “section_bg_gradien_color”,
“label”: “Gradien Background Color”
}
]
}
],
“presets”: [
{
“name”: “Rich Text”,
“category”: “others”,
“blocks”:[
{
“type”: “section_padding”
}
]
}
]
}
{% endschema %}

1 Like

Hi @Simplykool

Please, share your store URL or a preview. Thanks!

www.mastdeals.com

Hi @Simplykool

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.rich-text {
    background: transparent !important;
}

Here is the result:

I hope this helps

Best,

Daisy

1 Like

Thanks for the info. Have you already solved the issue?

Thank you for you solution .. its solved :slightly_smiling_face:

Hi ! I have the same problem with the theme flow, however I tried everything and it’s still not working. I’ve inspected the code, tried to force the transparent background on all of the related html elements but I can’t do anything I still have the bug.

I can’t link you the shop as it’s not published yet, but here are some screenshots about the code

Thanks in advance !