Achieving Fixed Height And Scrollable Column

You can use simple overflow:auto; Instead.
Checked it?

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 4 years, 9 months ago by Farhad.
• This reply was modified 4 years, 9 months ago by Farhad.

@farhadvn
Thanks for the effort. I didnt state that I am not good with these codes and css. I just copied and pasted those codes.

What I want is for the row to be scrollable. The row should occupy about 80% of the user screen, then the rest of the text goes under, you have to scroll to reveal it.
The reason is simply to have a very long article, but hidden (kind of) for seo.

Kindly write for me what to copy and paste in the CSS section of the page.

Thanks

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

@farhadvn
Thanks,
But didnt work. I dont know if I am getting it right. Bellow is what I did:
1. In VC Row setting, I added scrollable-col in the Row ID space
2. Then in the Custom CSS settings under Page setting, I just pasted this your css code
3. Ok and Preview, Not working, The article is still showing very long

T

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;

Wow,
Still didnt work.

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

With regards to the second part of your writeup, I inspected the area, and here is what I found out:

div#scrollable-col.vc_row.wpb_row.vc_row-fluid

• This reply was modified 4 years, 9 months ago by dannyogolo.

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

FINALLY.
This one works, but the 140 is small, so I will play around with px and % to see which works better,

Thanks for not giving up on me

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 ???