}
.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;
}
}
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-wrapperwithinline-flexdisplay - Implements
::beforeand::afterpseudo-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.
Sorry, should have done that already…
Sorry, should have done that already…
Resolved