Woocomerce Long Description - Columns without Page Builder - Possible ?

Hi , so i find out how to create the columns from an older post , with the grid system is built inside GP. Very Nice !

<div class="grid-container grid-parent">
      <div class="grid-50">
            First column
      </div>
      <div class="grid-50">
            Second column
      </div>
</div>

If i want to specify this for all woocomerce description , so i will have two columns ( copy paste this code ) and i will insert my text or my photo inside the columns ok .

How can lets say i will give a border in the columns and how can i make it with a specific width like this one here https://tonymoly.us/collections/skin-concerns-hydration/products/the-chok-chok-green-tea-watery-skin .

I mean i should wrap the container and give it a class ? i dont want the changes to display in whole site , but in the woocomerce description only !

Hi there,

The built-in grid system still works but I would highly recommend going with flexbox going forward.

This shows an example of creating 3 columns:
https://docs.generatepress.com/article/split-header-three-sections/

Can you do this first and link me to the result and I'll provide some suggestions on the CSS part?

Let me know :)

Hallo Leo ! and thank you for your advice on flex , is better to make it with flex for what reason ?

So i have created a demo take a loot the html

<div class="header-section">
    <div class="header-section-1">
         <div class="inside-column2">
                    <h3>Heading 3</h3>
                    <h4>Heading 4</h4>
                    <p>paragraph paragraph paragraph paragraph paragraph paragraph  </p>
             </div>
    </div>

    <div class="header-section-2">
            <div class="inside-column2">
                    <h3>Heading 3</h3>
                    <h4>Heading 4</h4>
                    <p>paragraph paragraph paragraph paragraph paragraph paragraph  </p>
             </div>
    </div>

   
</div>

And the Css as you have shown

.header-section {
    display: flex;
}

.header-section > div {
    width: 50%;
}

@media (max-width: 768px) {
    .header-section > div {
        width: 100%;
    }
}

Is not responsive , i mean i must make the columns in mobile one below the other .

And if is possible to tell me how i target now them and give some space and some border or whatever , i mean if you show me how to target them i will style it later .

Thank you once again

Flexbox is just the newer/better method.

I don't think you need the inside-column2 div but it's up to you.

The width: 100%; should make it responsive on mobile. Can you link me to the page so I can see why it isn't working?

You can target each section like

.header-section-1 {
    color: #000;
}

Hallo Leo

Nice to Know about Flex , yes as i see is a trend now .

 <div class="header-section">
    <div class="header-section-1">
        
            <h3>Header 3 </h3>
            <h4>Header 4</h4>
            <p>a simple paragraph </p>
      
    </div>

    <div class="header-section-2">
           
                    <h3>Heading 3</h3>
                    <h4>Heading 4</h4>
                    <p>a simple paragraph.</p>
            
    </div>

   
</div>

My code for it

Trying add this CSS as well:

@media (max-width: 768px) {
    .header-section {
        flex-direction: column;
    }
}

Hello Leo , Thanks i got it actually , it is not working fine but there probably be something i have not set up right , but i think i have found how it works and one more oportunity to learn some Flex , looks really cool actually , So i have to thank you twice.. ;)

No problem :)

Flexbox is cool for sure!