Dawn theme: Add padding to custom component

[DSM1]

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?

[koravski]

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

<div class="featured-text">
<h2>{{ section.settings.section_title | escape }}</h2>
{{ section.settings.text }}
</div>

And add the css below in your css file:

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

Hope it helps. 

[DSM1]

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?

[koravski · Accepted solution]

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

<h2>{{ section.settings.section_title | escape }}</h2>
{{ section.settings.text }}

with:

<div class="featured-text">
<h2>{{ section.settings.section_title | escape }}</h2>
{{ section.settings.text }}
</div>

Also add this at the top of the file: 

<style>
.featured-text {
padding-left: 20px:
padding-right: 20px;
}
</style>

Tell me if it works.

[DSM1]

It doesn't work 😞

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

<style>
.featured-text {
padding-left: 20px:
padding-right: 20px;
}
</style>

<div class="featured-text">
<h2>{{ section.settings.section_title | escape }}</h2>
{{ section.settings.text }}
</div>

{% schema %}
{
  "name": "Rich text",
  "settings": [
    {
      "type": "text",
      "id": "section_title",
      "label": "Title",
      "default": "Talk about your brand"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text",
      "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
    }
  ],
  "presets": [
    {
      "name": "Rich Text",
      "category": "Text"
    }
  ]
}
{% endschema %}

[koravski]

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.

[DSM1]

Good catch! Thank you! It works now!!

Thank you very much for your help 🙂