Reason for needing the Code Snippet
The client wanted to display a list of past events in a scrollable column. This was easy to implement using simple css. The page layout was done with Beaver Builder, but the solution should work for any html container.
What the Code Snippet does
This css allows the content in one column in a row scroll if it is longer than the height of the column.
Here's the result:
Here's the Code Snippet
overflow-x:scroll;
Make a column, in this case using Beaver Builder and give it an ID to target a CSS selector (in this example it's highlights-scroll). Then add the following CSS to add scroll bars so the content will scroll in the x direction (up and down):
.highlights-scroll .fl-col-content {
max-height:64vh; overflow-x: scroll;
padding-right: 30px;
}
Limit search for phrases by using " " around the phrase
Subscribe to Code Snippet updates
You will get an email the morning after we post a new Code Snippet
Other Recent Code Snippets
After creating a child category I wanted to remove the parent category from 30 posts. I finally searched for “how to remove a post category in bulk edit in wordpress” and and lo and behold the second result led me to this plugin. It works perfectly. I’m only sorry I […]
Read More
With more and more privacy laws on the horizon, we advise all of our clients to not only have a Privacy Policy in place but also have a strategy to keep it up to date with newly required disclosures. An up to date Privacy Policy can help you avoid significant […]
Read More
I came across an Elementor vs Beaver Builder comparison review that was published in August 2020. While I am pretty biased in favor of the Beaver Builder platform the reviewer seemed to favor Elementor. If you are trying to decide which page builder platform to use I’d encourage you take […]
Read More
Ever want to provide your readers with email updates to your website? WordPress’ built in RSS feed functionality provides an easy way to provide the content to email newsletter services like Mailchimp or Mailerlite. But what if you want to create email updates that don’t include all your new posts, […]
Read More
I made an animated gif screenshot recording to demonstrate a code snippet, but I wanted to resize the image and make it loop. I found a useful website that has easy tools to do that. I reduced the size by 50% and made it auto-loop 30x. Then optimized it to […]
Read More
click the green switch at the top of the screenshots to compare the WordPress vs the Static HTML versions of the same website the static version is live at: http://halcyonlearning.com/ (This post was viewed 204 times) in the last month.)
Read MorePopular Posts
Trouble moving your site to Godaddy Managed… September 14, 2015 Recently a reader raised a question in a comment to a… (2,565)
Formatting a custom number field to add commas February 9, 2020 I needed to format a number field (999,999,999), coming from… (2,216)
Growing Pains for GoDaddy WordPress Managed Hosting… March 21, 2014 Admittedly it's a new product, but currently there is no… (2,116)
A bit of PHP to preserve html formatting in standard… March 30, 2020 If you don't use the Excerpt field in your posts… (2,056)
How to add custom post types to your default RSS feed March 27, 2020 RSS readers are somewhat old school in 2020, but the RSS… (1,419)
Reader Interactions