[Resolved] Woocomerce Long Description – Columns without Page Builder – Possible ?

[FunkyCss]

Hallo once again , and i am truly sorry that the last days i am opening so many tickets in a row , is that i just want to take everything out from Generatepress as i like it so much and i hope all this will help somebody else in the Future .

So my final step in my Store is to make 2 columns in the Description area where is bellow the images .
I want to do something similar like this one – https://tonymoly.us/collections/body/products/aloe-99-chok-chok-soothing-gel-1

I was wondering if i can use the classes of GP for the layout inside Woocomerce Description and what that means , and if possible can i have the Classes ? is going to work ? or if i will use some div classes can i customize them with Css ? need to be mobile friendly .

I can easily do that with a page builder , i have done it a million times , but i will feel a jerk for two columns to bring elementor in my site ! hah

[FunkyCss]

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 !

[Leo]

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 🙂

[FunkyCss]

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%;
    }
}

[FunkyCss]

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

[Leo]

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;
}

[FunkyCss]

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

[Leo]

Trying add this CSS as well:

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

[FunkyCss]

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.. 😉

[Leo]

No problem 🙂

Flexbox is cool for sure!

[Author]

Posts