Customizing Flexslider and Vertically Aligning Content


Hey friends!

This week I'm releasing another batch of 20 videos in the "Front End Development" collection. In these, we walk through multiple approaches to vertically aligning content - something that ends up being ridiculously tricky to do consistently - and also customizing the look of Flexslider, one of the most commonly used components for creating responsive slideshows.

Enjoy!


How the CSS 'flex' display, or 'Flexbox', works New!
(This one's FREE!)

Screenshot for How the CSS \

In an ideal world, CSS would give us a sure-fire way to align our content vertically without having to bash our heads against a wall. In this video we explain the 'Flexbox' spec, which - among other things - gives us the ability to do just that, and how you can learn more about it.

How to use Flexbox to vertically align a block element New!

Screenshot for How to use Flexbox to vertically align a block element

Here we apply the Flexbox model to our slideshow content and sit back, pleased at the easy with which we were able to accomplish this task.

Why using Flexbox doesn't make sense for every project New!

Screenshot for Why using Flexbox doesn

In this video we explain that while Flexbox is pretty much ideal in terms of the freedom and flexibility it gives us, it's not ideal when it comes to browser support, and there's no JavaScript polyfill out there that will help us get what we need. So for this project, we have to abandon this simple solution and dig around a bit more for something that works.

Why we can't vertically align compound elements with the 'vertical-align' property New!

Screenshot for Why we can

Having let go of the idea of the promise of Flexbox, we look into some other options for vertical alignment, starting with the deceptively named 'vertical-align' property. Ultimately, this won't work for what we need, but we get some insight into why.

Why vertically aligning with 'line-height' doesn't work for multi-line elements New!

Screenshot for Why vertically aligning with \

In previous vertically aligned elements, we've used the 'line-height' property. In this case, however, that's not going to work. Onward!

How HTML tables work and why they were once used for layout New!

Screenshot for How HTML tables work and why they were once used for layout

We've sure made it a long way in this series without discussing tables. In this video we talk through the basic HTML table syntax, and explain why table cells have historically been a go-to solution for challenging layout issues.

How to make any element work like a table cell with CSS New!

Screenshot for How to make any element work like a table cell with CSS

With modern CSS, we can make any element behave like any other element. Here we look at using the 'table-cell' display value to attempt yet another go at getting vertical alignment to work.

Using the absolute positioning and negative margin solution for vertically aligning an element New!

Screenshot for Using the absolute positioning and negative margin solution for vertically aligning an element

In this video we continue exploring various solutions to issue of vertically aligning an element. This one uses position and margin, and works well for a single group of elements, but not as great for multiple slides in a sider.

How to use a CSS transform to vertically align an element New!
(This one's FREE!)

Screenshot for How to use a CSS transform to vertically align an element

After working through number vertical alignment solutions, we've finally come to the one that's most ideal for our situation. In this video we use a CSS 'transform' to position the element halfway down its container. Nice.

Reviewing browser support for CSS transforms New!

Screenshot for Reviewing browser support for CSS transforms

As with most of the newer CSS properties, it's good to check out browser support before we standardize on a solution that uses them. In this video we hop over to caniuse.com to see how we're doing for support of the 'transform' property. Spoiler: Prospects look good.

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.