A user seeks to create an almost full-width header in the Taste theme by removing left and right padding. Multiple solutions are provided:
CSS Solutions Offered:
base.css, style.css, or theme.css in the Assets folder.header:not(.reward-menu).page-width with padding adjustmentspadding-left: 12px !important; padding-right: 0px !important;padding-left: 1.2rem; padding-right: 0; for screens min-width 990px, accounting for existing -1.2rem offsetImplementation Steps:
Alternatively, code can be added to theme.liquid above </head> tag.
Follow-up Issue:
Another user successfully applied the header fix but now seeks to extend full-width padding removal to the entire site for both desktop and mobile.
Visual previews were shared showing before/after results. The discussion remains open regarding the site-wide implementation question.
Keeping responsiveness screen sizes in mind, I would recommend adding this CSS. The 1.2rem padding-left also accounts for an existing portion of the code placed on the header element, which adds -1.2rem. Attached a preview below.
media screen and (min-width: 990px) .header:not(.drawer-menu).page-width {
padding-left: 1.2rem;
padding-right: 0;
}
