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
There are several reasons why you might want to copy your website,
you want to make a “sandbox” copy to experiment on, without affecting the public-facing production site
you want to change hosting companies to get a better deal, faster performance or more functionality
having a complete copy of your website is a great insurance policy should something happen to your host and your site is lost.
Jetpack Photon should help I recommend Jetpack-Photon module (deactivate all the other Jetpack modules you don’t use). Photon is an image-only CDN solution using Automatic’s servers. All your images are uploaded to their servers the next time the image is served after you activate Photon. Subsequently the images are served […]
Read More
Using column shortcodes to make 2 columns didn’t work for this post. But I was able to do this on a Page (instead of a Post) using the theme’s 2-column page template.
See the succesful results at: Multi-column video test page
Read More
BackWPup plugin developer, Daniel Huesken has decided to begin offering a “Pro” version beginning with version 3.0 of the plugin. I don’t have a problem with this and in some cases might recommend the Pro version to some of my clients. All the issues I had with the switch to version 3.0 […]
Read MoreHeadings Header one Header two Header three Header four Header five Header six Blockquotes Single line blockquote: Stay hungry. Stay foolish. Multi line blockquote with a cite reference: People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. […]
Read More
Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started. On the topic of alignment, it should be noted that users can choose from […]
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,482)
Formatting a custom number field to add commas February 9, 2020 I needed to format a number field (999,999,999), coming from… (2,091)
Growing Pains for GoDaddy WordPress Managed Hosting… March 21, 2014 Admittedly it's a new product, but currently there is no… (2,086)
A bit of PHP to preserve html formatting in standard… March 30, 2020 If you don't use the Excerpt field in your posts… (1,949)
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,374)
Reader Interactions