Support » Fixing WordPress » Achieving Fixed Height And Scrollable Column

  • Resolved dannyogolo

    (@dannyogolo)


    I am using VC page builder that doesn’t support what I want to to, but another page builder (beaver) supports it, so I guess it’s just about knowing the difference.

    I want to insert a row inside a Section.
    I want the row to have a fixed height (not more than 80% of mobile phone screen height). But I want to place a very long article inside it.

    So this means the row will be scrollable so that visitors will have to scroll that area in order to read what is contained inside.

    This css worked with beaver,

    .scrollable-col .fl-col-content {
    max-height: 80%;
    overflow-x: scroll;
    }
    (.scrollable-col) is the ID)

    Can someone please translate it for me to work with VC builder ?

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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 10 months, 2 weeks ago by Farhad.
    • This reply was modified 10 months, 2 weeks ago by Farhad.
    Thread Starter dannyogolo

    (@dannyogolo)

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

    Thread Starter dannyogolo

    (@dannyogolo)

    @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;
    Thread Starter dannyogolo

    (@dannyogolo)

    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 10 months, 2 weeks 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).

    Thread Starter dannyogolo

    (@dannyogolo)

    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 ⁦🍀

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Achieving Fixed Height And Scrollable Column’ is closed to new replies.