How can I improve my featured brand alignment?

Shopify Discussion

Topic summary

Featured Brands items in a Shopify menu are misaligned (“looks ugly”); the requester wants a cleaner, grid-like alignment. A screenshot was shared to illustrate the issue, but the key remediation centers on CSS changes.

Proposed fix (desktop-only via media query, min-width: 1024px) added in Online Store > Themes > Edit code > Assets/theme.css:

  • Make the submenu container a flexbox with wrapping: target the submenu holder under the Featured Brands menu and set display: flex; flex-wrap: wrap.
  • Standardize each brand item’s block: target the list items and set display: block; width: 20%; padding-bottom: 0. (This arranges items in five columns.)

One participant asked for the store URL and password to confirm the exact solution before proceeding.

Notes:

  • CSS = styling code; a media query applies styles at specific screen sizes.
  • Some posted selectors contained typos (e.g., “#menu-item-featur e-brands” or spacing before “.submenu-holder”) that may need correction to “#menu-item-feature-brands .submenu-holder”.

Outcome: No confirmation from the requester yet; the thread remains open/ongoing without verified resolution.

Summarized with AI on February 25. AI used: gpt-5.
1

I want to set this Featured Brand Alignment and its need to be looks neat and tell me How I can solve this problem. Its look ugly and

Capture.PNG
Capture.PNG1366Ă—293 99.7 KB

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here

3

Hi @Arhamabbas ,

To change you follow the instruction:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
@media (min-width: 1024px) {
    #menu-item-feature-brands .submenu-holder {
        display: flex;
        flex-wrap: wrap;
    }
    #menu-item-feature-brands .submenu-holder li {
        display: block;
        width: 20%;
        padding-bottom: 0;
    }
}

I hope it would help you.

4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media (min-width: 1024px) {
    #menu-item-feature-brands .submenu-holder {
        display: flex;
        flex-wrap: wrap;
    }
    #menu-item-feature-brands .submenu-holder li {
        display: block;
        width: 20%;
        padding-bottom: 0;
    }
}