How to fix brand name overlaps on mobile view?

Store Design
, , , , ,

Topic summary

A user is experiencing a layout issue on mobile where long vendor/brand names overlap with the collection header and get hidden beneath the sort bar.

Problem Details:

  • Occurs on mobile view only
  • Brand names that are too long extend beyond their container
  • Text becomes obscured by overlapping UI elements

Proposed Solution:
Another user suggested adding custom CSS targeting mobile screens (max-width: 719px) to adjust the minimum height of the section spacing element.

Current Status:
The CSS fix has been proposed but not yet confirmed as tested or working. The discussion appears to be awaiting feedback on whether the solution resolves the overlap issue.

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

Hi my vendor/brand name when to long overlaps the collection header and hides under the sort bar

my site is https://b32b39-5.myshopify.com/collections/vendors?q=Gucci%20exclusive%20montie%20bag%20with%20sherling

MIKESTORK_0-1707059000031.png
MIKESTORK_0-1707059000031.png185Ă—400 32.1 KB

2

@MIKESTORK

Can you try adding the below css?

@media (max-width: 719px) {
.relative.section-spacing.section-spacing–tight {
min-height: 150px;
}
}

1 Like