Dawn theme: Add padding to custom component

Store Design
1

Hi! I added a Rich Text component to the Dawn theme as described here: https://shopify.github.io/liquid-code-examples/example/featured-text

However, there is no padding at the sides at all, as you can see on my sceenshot.

Any thoughts on what I can do to add padding?

Screenshot 2022-08-31 at 11.44.53.png
Screenshot 2022-08-31 at 11.44.53.png1328×452 81.8 KB

2

You can wrap the your code in a div with a class:


## {{ section.settings.section_title | escape }}
{{ section.settings.text }}

And add the css below in your css file:

.featured-text {
padding-left: 20px:
padding-right: 20px;
}

Hope it helps.

3

Thank you! I’m a little in doubt about where to add the code though - would the div be around the code in the .liquid file?

And which CSS file to add the style to? base.css?

4

So open featured-text.liquid file and replace this code:

## {{ section.settings.section_title | escape }}
{{ section.settings.text }}

with:


## {{ section.settings.section_title | escape }}
{{ section.settings.text }}

Also add this at the top of the file:

Tell me if it works.

5

It doesn’t work :disappointed_face:

The full featured-text.liquid file code reads now:


## {{ section.settings.section_title | escape }}
{{ section.settings.text }}

{% schema %}
{
  "name": "Rich text",
  "settings": [
    {
      "type": "text",
      "id": "section_title",
      "label": "Title",
      "default": "Talk about your brand"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text",
      "default": "

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

"
    }
  ],
  "presets": [
    {
      "name": "Rich Text",
      "category": "Text"
    }
  ]
}
{% endschema %}
6

Hey,
change the two dots after 20px: at the end to semicolon. Like this.

padding-left: 20px;

If it does not work again share a link to the page.

7

Good catch! Thank you! It works now!!

Thank you very much for your help :slightly_smiling_face: