Custom CSS for column with fixed height that’s scrollable

  • JBwebdes

    (@jbwebdes)


    6 years ago

    Hello! I’m trying to edit the CSS for the right hand column on the home page (News & Updates). I’d like it to have a fixed height and have a scroll bar.

    I assigned the column the following class: scroll

    My CSS at this point is:
    .scroll .fusion-column-wrapper {
    height: 700px;
    overflow-y: scroll;
    }

    I’ve tried using max-height (instead of height) in both pixels and vh.

    I’m using the Avada theme – when I reached out to them for support they said that achieving this would involve custom CSS.

    Any help would be truly appreciated!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Joy

    (@joyously)

    5 years, 12 months ago

    This isn’t really a WordPress question, unless you don’t know where to put your CSS (in Customizer > Additional CSS or in your child theme style.css file).

    Make sure your selector matches your HTML.
    Make sure your CSS works on all window sizes. Doing this, you find that the height is for the element (not the content of the element), and overflow-y is for what to do when there is more content than the element’s height can hold. Some windows aren’t even 700px tall. max-height is for making sure the element using a height with units like vh doesn’t exceed whatever max is (so they should be used together).

    Thread Starter JBwebdes

    (@jbwebdes)

    5 years, 12 months ago

    Joy – thank you SO much for what you shared. In double checking things, I found that the class was not applied to the column as I thought it was. Simple mistake – easy fix. I appreciate how you explained the properties to me and how they work together. The overflow-y was not one that I was familiar with so this really helped.

    Curious… are there any forums you would recommend that are for HTML/CSS questions?

    Joy

    (@joyously)

    5 years, 12 months ago

    There is a lot of information on https://stackoverflow.com/questions
    You might find a more targeted forum at https://stackexchange.com/sites# but I haven’t looked (there are so many).
    But since both HTML and CSS are declarative, it’s often best to just read the Reference. Google your question and you’ll probably find an article about it. There is a bunch on CSS at https://css-tricks.com/

    Thread Starter JBwebdes

    (@jbwebdes)

    5 years, 12 months ago

    Thanks for these web sites, Joy! I think I have used them over the years… good idea for me to bookmark them for future reference. 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Custom CSS for column with fixed height that’s scrollable’ is closed to new replies.