Achieving Fixed Height And Scrollable Column

Oh, and remember add a height for parent of .scrollable-col & .fl-col-content, else does NOT work.

p.s: if you use for example this code:
.box{height:100px;}
.scrollable-col{height:50%;}

It will be about 50px, mean its 50% of size of its place holder not display of user only! So if you use 80% without a parent limit it does NOT work. also you can use overflow:scroll if it is a scrollable box in any size.

• This reply was modified 5 years, 5 months ago by Farhad.
• This reply was modified 5 years, 5 months ago by Farhad.

@dannyogolo you can use this:

.scrollable-col .fl-col-content {
height:140px;
overflow: scroll;
}

You can try to change size depend on your theme and find best size for both mobile and desktop, its better to use a fixed size not max for better algiment.

At my knowledge i cant say a method to using 80% in this way, but i think no need and you can try a fixed size.

Try with !important as:

.scrollable-col .fl-col-content {
height:140px !important;
overflow: scroll !important;
}

If not usable im sorry because i use pure css no in page bulider so dont know more than it.

If you try it in a simple html, will see work, but in vc page bulider i cant test.

P.S: REMEMBER you can find the css id/class chrome, simple replace…
Click right on the box of text, select last option, now you should see css codes about this spot, find the right class id/class.
ALSO if its a custom css only for the part, may no need to class/id,try with style only for exapmle:

height:140px !important;
overflow: scroll !important;

So try as this:

#scrollable-col{
height:140px !important;
overflow: scroll !important;}

Can you be kind to explain what this means?
.fl-col-content;

Yes! In CSS if you want to style/customize a type of data, you need a class/id…

<p> Hello World</p>
<p class=”header1″> Hello World</p>
<p id=”header2″> Hello World</p>

In this example if you want to change style about this paragraph you can use:
p{
//Your codes
}
.header1{
//Your codes
}
#header2{
//Your codes
}
There is 3 methods, parts (as p for paragrahs), class’s (as the example, with a dot before) and id’s (with # before instead of .)

In your area its an ID, so called by #.

If you need full explain or a guide, take a look here:
https://www.w3schools.com/css/

It help you for changing Interface of your theme, CSS in this level is not hard and you can learn it in a few days (for small twaeks and changing styles in this level).

I’m glad you were able to solve it 🙂 ,
Yes, you can customize it to what you think is best for your website.

Good luck ⁦🍀