Kevin Powell - Community•6d ago

Having CSS Issue where putting margin in inner divs moves my whole component

Hey all . I am having an issue where i put a background color on my component but if i put margin in my inner div in the compoonent it moves the whole component. I am using the Flynt Wordpress Theme

flynt-component[name='BlockWysiwyg'] {
  background-color: var(--background-color);
  position: relative;
}

flynt-component[name='BlockWysiwyg']::before {
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    inline-size: 100%;
    padding-block: 300px;
    padding-block-end: 200px;
    position: absolute;
    transform: translateY(-50%);
    z-index: -1;
  @media (max-width: 768px) {
      background-position: center;
      background-size: contain;
    }
  }

flynt-component[name='BlockWysiwyg'] {
  background-color: var(--background-color);
  position: relative;
}

flynt-component[name='BlockWysiwyg']::before {
    background-image: var(--background-image);
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    inline-size: 100%;
    padding-block: 300px;
    padding-block-end: 200px;
    position: absolute;
    transform: translateY(-50%);
    z-index: -1;
  @media (max-width: 768px) {
      background-position: center;
      background-size: contain;
    }
  }

Twig/HTML

<flynt-component 
  name="BlockWysiwyg" 
  class="componentSpacing" 
  {{ options.theme ? 'data-theme="' ~ options.theme ~ '"' }} 
  style="
  {% if options.backgroundColor != 'none' %}
    --background-color: var({{ options.backgroundColor }});
  {% endif %} 
    {% if options.marginBlockStart != 'none' %}
      margin-block-start: {{ options.marginBlockStart }};
    {% endif %}
    {% if options.marginBlockEnd != 'none' %}
      margin-block-end: {{ options.marginBlockEnd }};
    {% endif %}
    {% if options.backgroundImage %}
      --background-image: url('{{ options.backgroundImage }}');
    {% endif %}
  ">
  <div class="container">
    <div class="content" 
         data-size="{{ options.size }}" 
         data-align="{{ options.align }}" 
         data-text-align="{{ options.textAlign }}">
      {{ contentHtml|e('wp_kses_post') }}
    </div>
  </div>
</flynt-component>

<flynt-component 
  name="BlockWysiwyg" 
  class="componentSpacing" 
  {{ options.theme ? 'data-theme="' ~ options.theme ~ '"' }} 
  style="
  {% if options.backgroundColor != 'none' %}
    --background-color: var({{ options.backgroundColor }});
  {% endif %} 
    {% if options.marginBlockStart != 'none' %}
      margin-block-start: {{ options.marginBlockStart }};
    {% endif %}
    {% if options.marginBlockEnd != 'none' %}
      margin-block-end: {{ options.marginBlockEnd }};
    {% endif %}
    {% if options.backgroundImage %}
      --background-image: url('{{ options.backgroundImage }}');
    {% endif %}
  ">
  <div class="container">
    <div class="content" 
         data-size="{{ options.size }}" 
         data-align="{{ options.align }}" 
         data-text-align="{{ options.textAlign }}">
      {{ contentHtml|e('wp_kses_post') }}
    </div>
  </div>
</flynt-component>

3 Replies

ChrislizardcOP•6d ago

Right now if i put a margin top for example in div class content it basically moves my whole component. i want to keep my background color where it is and just move the content within, but...

clevermissfox•6d ago

I think you’re looking for padding , not margin , if you want to create space between the edge of the bg color and the content inside .

ChrislizardcOP•6d ago

Thanks dude , yeah you have a point padding works like a charm

Gaming

Programming

Having CSS Issue where putting margin in inner divs moves my whole component