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).
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://www.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 🥰
Leave a Comment