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
The Start of a New Website Project Master Roofing Company is a family-owned and operated Oakland roofing contractor with nearly 40 years experience of servicing residential and commercial clients in and around the San Francisco Bay Area. They had a Yelp page, but they didn’t have their own website. The […]
Read More
WordPress is an award-winning web software, used by millions of webmasters worldwide for building their website or blog. SiteGround is proud to host this particular WordPress installation and provide users with multiple resources to facilitate the management of their WP websites: Expert WordPress Hosting SiteGround provides superior WordPress hosting focused […]
Read More
Normally putting the URL of a pdf on a line by itself doesn’t display the pdf on a WordPress page, and if you use the add media button and paste the URL for the pdf into the URL field, you get a link that will open the pdf, but the pdf does not display on the page itself,
Read More
Recently a reader raised a question in a comment to a previous post. He was confused about how to move an existing site to Godaddy Managed WordPress Hosting. Having done this several dozen times now I’ve developed some “best practices” and work-arounds I can share.
Read More
Google has started rolling out filtering for Google searches from mobile devices. If you site doesn’t meet the criteria for mobile-friendly, your site won’t show up in the search results no matter how relevant your page is to the search. As more folks are visiting websites using smartphones and tablets […]
Read More
Hosting your WordPress website on GoDaddy has been strongly discouraged by me and most of the WordPress consultants I know. But GoDaddy has just introduced a new WordPress Managed Hosting plan that may change all that.
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