A Shopify store owner using the Wonder theme is experiencing layout inconsistencies between full-screen and desktop views in their header section.
The Issue:
Proposed Solution:
A community member (Dan-From-Ryviu) provided custom CSS code to resolve the discrepancy:
Status: Solution provided but not yet confirmed as implemented or tested by the original poster.
For my shopify theme Wonder, I need help to fix it so that my full screen view matches my desktop view. I will provide screenshots below as well as my store and password. Please help!
Store & password:
https://admin.shopify.com/store/miujuq-7w/themes/176465740146/editor
ethosetd
I can’t find that second css rule to remove it. Can you help me?
Please add this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Themes settings
.wt-header--fashion .wt-header__body {
max-width: 1200px !important;
}
@media (min-width: 1200px) {
.wt-header__search__label { margin-left: 0px !important; }
#shopify-section-sections--24300071879026__header .menu-link,
.wt-header__panel__item a,
.wt-header--fashion .wt-header__search .visually-hidden { font-size: 18px !important; }
.wt-header--fashion .wt-header__body .wt-header__aside { display: none; }
}
