I have a logo text wrapper that works on desktop, but not mobile. Can someone help?

Topic summary

A user is experiencing issues with custom CSS code for a logo text wrapper in their store header. The code successfully displays text before and after the logo on desktop but fails to work on mobile devices.

Technical Details:

  • Uses .header__heading-logo-wrapper with inline-flex display
  • Implements ::before and ::after pseudo-elements to add taglines:
    • Before: “Brewed with Harmony, Steeped in Tradition”
    • After: “Your Daily Dose of Country Music in Every Sip!”
  • Additional CSS includes media queries and mobile-specific banner styling

Current Status:

  • A support member requested the website URL to investigate further
  • The user provided their site URL (www.nashbrew.com) after initially forgetting to include it
  • The issue remains unresolved and awaiting diagnosis

Note: Some code in the original post appears reversed or corrupted, which may indicate formatting issues in the submission.

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

}
.header__heading-logo-wrapper {
display: inline-flex !important;
align-items: center;
}
.header__heading-logo-wrapper::before {
content:“Brewed with Harmony, Steeped in Tradition”;
}
.header__heading-logo-wrapper::after {
content:“Your Daily Dose of Country Music in Every Sip!”;
}
.header__heading-logo-wrapper::before,
.header__heading-logo-wrapper::after { font-size: 13px; font-weight: 700; font-family: Soho !important; margin-right: 2rem;margin-left: 2rem;
@media screen and (max-width: 749px){
.banner–mobile-bottom:not(.banner–stacked) .banner__content {
position: absolute !important;
bottom: 0px;
left: 0px;
}
.banner–mobile-bottom .slideshow__text.banner__box {
background: transparent !important;
}
}

Hello @NashBrew ,

It would be great if you share your website URL here.

Thanks,

Ritu

Sorry, should have done that already…

www.nashbrew.com

Sorry, should have done that already…

www.nashbrew.com

Resolved