How to remove padding in custom liquid for product availability text?

[FR-ASC]

Hello, I'm using a custom liquid to display a text that changes when a product is in stock or not. I created it under the production information section. Also if I put it above other component in the production information section everything under it will inherint the same padding.

I need help to remove the padding and make my text allign with everything

Shop link: https://07bab0-2.myshopify.com/password
Shop code: Karamel

In any product information you can find a text which comme from the liquid code: "Délais de livraison: 10 - 15 jours ouvrés" the number can change if the product have stock or not anyway it's this one I'm having an issue with.

This what I found when inspecting the page

My custom liquid code

<style>
  .stock-status p {
    font-weight: bold;
    color: black;
font-size: 18px;
padding: 0 !important;
  }
</style>
<div class="page-width">
<div class="rte">
{% if product.available %}
  {% assign stock_quantity = product.variants.first.inventory_quantity %}
  <div class="stock-status">
    {% if stock_quantity > 0 %}
      <p class="In Stock">Délais de livraison: 7 - 10 ouvrés {{ shop.metaobjects['sous_categorie']['.nom'] }}</p>
    {% else %}
      <p class="out-of-stock">Délais de livraison: 10 - 15 jours ouvrés</p>
    {% endif %}
  </div>
{% endif %}

[Moeed · Accepted solution]

Hey @FR-ASC 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__info-container>*+* {
    padding-left: 0 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Made4uo-Ribe]

Hi @FR-ASC 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.product__info-container .page-width {
    padding-left: 0px !important;
}

And save.

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[PageFly-Henry]

Hi @FR-ASC 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

.product__info-wrapper.grid__item.scroll-trigger.animate--slide-in .page-width {

    padding: 0 !IMPORTANT;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly