Setting Up a Logo Section with GenerateBlocks (2 Ways)

I don’t know about you, but one of the most annoying sections I hate building out is a logo section. When you’ve got a horizontal bar of logos in a row, it always seems to be so hard to get them evenly spaced and aligned right and look proportionate. So, today I’m going to show you how to do it in GenerateBlocks so that you can set it up for success and look great across desktop and mobile.

What We’re Building

Here’s what we’re after today: creating a logo section where the logos are proportionately sized and spaced. I’ve already laid it out here for an example so you can see what the finished product is.

There are two alternative ways you can go about this. As you can see, depending on the orientation of your logo, these first three ones are much more horizontal in proportion, whereas the next two are a little more square. You can do this two ways where it either keeps it to a proportionate height or a proportionate width.

Method 1: Fixed Height

Laying the Foundation

I’ve got a new page created here and I’m going to go ahead and put in a container and select one of my classes to add some padding. Insert an inner container.

We’ll open up our sidebar here. What we’re first going to do is drop in all of our logos. So, we’re going to add an image block for every single one. We’ll add our first one, and I’ll just duplicate that seven times.

Now we’ve got all our images in place. What we are going to do next is start working on our container.

Creating a Global Style

We’re going to create a global style for this container to target the layout for the container that holds them, as well as target those images inside.

I’m going to call this logo section and hit create. We’ll start with the blank style.

• Go to layout and set display to flex
• Go to alignment and set align items to center
• Set justify content to space between
• In flex layout, add a column gap of about 2rem

Targeting the Images Inside

We still don’t have our section looking like we want yet. The next step is to add a new selector in our logo section style for img. This is going to target each individual image inside our container.

With that selector created:

• Go to flex settings and put 1 in both flex grow and flex shrink
• Under sizing, set width to auto, height to 75px, and min width to 0
• Under media, set object fit to contain

Now the logos are more contained with each other, and object fit ensures the entire logo shows within each respective box.

Setting Flex Direction

Before we go ahead and save this and preview it, I want to go back and make sure that in our main logo section style under flex direction, we choose row. We want to make sure our logos are aligned horizontally and not stacked.

Let’s go ahead and save the draft and view the page.

Viewing the Result

There you have it. We’ve got our logos in a line. They’re evenly spaced and proportionate in terms of overall height, so they all look nice.

Method 2: Fixed Width

The second approach I mentioned is setting it up based on width.

• Under sizing in the image, set width to 150px and height to auto
• Remove the min width

Save the draft again and preview.

Now you can see the difference. The biggest change is that each logo is proportionately the same width—150px. Because they have varying heights, some logos will appear larger than others.

So it’s really up to preference whether you like proportionate widths or proportionate heights.

Reverting Back to Proportionate Height

Before we jump into the mobile responsive views, I’m going to revert back to the other orientation since that’s my preference:

• Image sizing: width auto, height 75px
• Min width: 0

Go ahead and hit save, open the page in the customizer, and let’s look at tablet.

Responsive Adjustments for Tablet and Mobile

Tablet—I don’t totally hate this. I think the Specialized logo is definitely a bit small. Maybe we could push this to two lines, but I wouldn’t be too picky.

Mobile—that’s definitely too small. We can work on wrapping this to two lines for mobile.

Wrapping Logos on Mobile

Jump back in. With our main style selected:

• Go to mobile
• Set flex wrap to wrap

This will allow logos to go onto multiple lines. But that’s far too many lines, so now we need to adjust the image selector.

• Under flex basis, insert a value that allows logos to fit on one line. Try 55px
• That looks pretty good. Maybe try 65px, but that results in two lines. Stick with 55px

Save that, refresh the page, and check mobile again.

Now we have seven logos—four on top, three on the bottom. I think that looks perfect.

Final Review

Tablet and desktop look good.

I hope that was helpful in showing a couple different approaches and how to build out a logo section using GenerateBlocks. As you can see, it’s kind of based on preference. The hard part is every single logo out there uses different proportions. So getting them to line up perfectly both horizontally and vertically feels almost impossible.

If you have a better solution for this, I’d love to hear it. This is the solution I always go with.