How to display only 4 logos per row in Empire theme logo list?

Store Design
, ,

Topic summary

A user asks how to limit the Empire theme’s logo list section to display only 4 logos per row.

Proposed Solution:
Another user provides a CSS/HTML example using flexbox:

  • Uses display: flex with flex-wrap: wrap on the parent container
  • Each child element (logo) has flex-grow: 1 to distribute space evenly
  • Includes margin adjustments for spacing between items

Status:
The discussion remains open with one suggested approach provided. The solution would need adaptation to the specific Empire theme structure and may require setting explicit widths (e.g., flex-basis: 25%) to ensure exactly 4 items per row.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

how to only show 4 logos in one row, in the logo list section?

Screenshot 2023-01-09 at 11.40.57 AM.png
Screenshot 2023-01-09 at 11.40.57 AM.png3430×762 307 KB

2

Hi,

Hope this example help you to guide.

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}

<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>