Divi Theme: Keeping Logo Section Small on Mobile

Web Design, WordPress | 0 comments

Divi Theme keeping logo section small on mobile is really easy to do! (Awkward phrasing for Yoast SEO!) But in all realness, this happens to me almost every time that I build a Divi site: I create a beautiful “Featured In” section with a bunch of logos going across the page, and then I go to mobile and it’s a bunch of HUGE logos stacked on top of each other. Thankfully, there is an easy fix!

Written Instructions for Divi Theme Keeping Logo Section Small On Mobile

So, it’s really pretty simple. First you need to decide how many columns you want to display side-by-side on mobile. 3 or 4 is recommended.

Take the below code and put it in your CSS tab in Theme Customizer:

@media only screen and (max-width: 980px) { .six-columns .et_pb_column { width: 33%!important; } }

Two things to note:

.six-columns above is going to be our CSS Class. You can change this to whatever you want. Like .mobile-logos or .logos. The CSS Class will be everything after the “.” so “six-columns” or “mobile-logos” or “logos”.

33% will display these in three columns on mobile. If you want four columns, change this to 25%.

If you need help finding the Theme Customizer, the easiest thing to do is to view your site and then hover over the site URL in top left to open the dashboard menu (see image below).

divi theme how to keep logo section small on mobile

Next we need to take your CSS Class and add it to the logo section:

By the way, you can do this in the reverse order (as I do in the video) and do the CSS Class first.

To do this, we’re gong to open the Divi Builder on the page with the logo section, and then navigate to the logo section.

We want to open the row settings (this means the settings of the teal-ish block, not the larger blue block). Please refer to the image below for clarity!

Open the section settings and add your CSS Class – this will be under the Advanced tab.

Remember to omit the “.” before your CSS Class! Once this is in – simply save, exit the Divi Builder, and then check your work on mobile. Oila!

Resources mentioned in the video:

Divi* ➡️ https://kcocreative.com/divi

Divi courses ➡️ https://www.kcocreative.academy

Best of luck! Xx, Kara

Ready for more?

Be sure to check out and subscribe to my YouTube channel. You can also view SkillShare courses (and a free two-week trial) here.

✨ Ready for the DIYer’s dream? Check out Website Launch Bootcamp, where a website designer (me!) and an ethical copywriter (Lauren Van Mullem) teach you brand strategy, ethical copy for coaches and website design in one nifty (and affordable!) package. ✨

*Affiliate links! I only promote services that I have used myself, regardless of whether I have an affiliate account with them, and using affiliate links when available helps me to continue to provide useful information at no cost to my viewers/readers/peeps. Thank you 🥰

You may Also Like

How to Change the Image on Your WordPress Link

How to Change the Image on Your WordPress Link

When you share a website link on places like Facebook and WhatsApp, a thumbnail image usually accompanies the link. If the image that displays is not what you want, I'm sharing an easy way to change that on WordPress websites today. In a previous tutorial, I used the...


Submit a Comment

Your email address will not be published. Required fields are marked *

Hi, I'm Kara

I’m one part website designer, one part strategist and one part accountability partner.  I help service-based solopreneurs get set up online without the tech headaches!