How to keep custom liquid code section adapt to page width? REFRESH Theme

Store Design
, ,
1

I moved my product description to the bottom of the page by adding a custom liquid code with this code inside:

<div class="container">
      <div class="row">
             {{ product.description }}
      </div>
</div>

Jun_Kuan_0-1681817851994.png
Jun_Kuan_0-1681817851994.png1908×798 49.5 KB

I’d like the product description to adapt to the page’s width and margin

2

To make the product description adapt to the page’s width and margin, you can modify the CSS of the container and row classes. Here’s an example of how you can do it:

Add a new CSS rule to your stylesheet:

.container {
  max-width: 100%;
  margin: 0 auto;
}

.row {
  margin: 0 -15px;
}

.container:before,
.container:after,
.row:before,
.row:after {
  content: " ";
  display: table;
}
.container:after,
.row:after {
  clear: both;
}

Replace your existing code with the following:


  

    {{ product.description }}
3

I tried putting the css code on base.css, and even on the custom css for the section only on customize theme part but it’s not working