The Divi Theme by Elegant Themes has just about everything covered in the Theme Customzier except for custom footer widget width.

The Divi theme is pretty impressive when it comes to being able to build a site out of the box with minimal coding. For someone who actually enjoys coding, it can take a bit of the fun out of developing a new site. However, for those sites that need to be built quickly or require little customization, it is a timesaver and then some.

While working on a project recently, I discovered an issue that others might encounter as well. Let’s say that you have a footer widget that is going to have a lot of text, such as an “About Us” section. You may even include a small thumbnail image within that widget as well. By default, all of the Divi footer widgets (in a four column layout) have a width of 20.875% on a screen 981 pixels and above. For those of you who aren’t so good in math…that means that they all will be the same width. That’s no good for our example. You would want that text widget to be a bit bigger than the others. In my case, the second widget was a store hours text widget that didn’t need to be anywhere near that wide. So how do you update the width of those footer widgets? Simple really…using the magical CSS Pseudo-classes first-of-type, nth-of-type(), and last-of-type. If you just want the code see below. However, if you’d like to learn what these pseudo selectors do click here to learn more.

Obviously, if you’d like to make your column widths different you could just change the widths. You’ll notice that this is only for screen sizes above 980px. You won’t have to set any fancy code below this breakpoint because the widgets will float left and take up 50% on a tablet and then 100% on mobile devices.

Now go get ’em tiger!