Is it possible to display my whole website in full width using the pipeline theme?

Store Design

Topic summary

Goal: Make a Pipeline theme storefront display at full width across the site.

Proposed approach 1:

  • Add CSS at the end of theme.css to remove the max-width constraint: set .wrapper and the header dropdown wrapper to max-width: 100%.
  • This targets the main layout container so sections can span the full browser width.

Proposed approach 2 (more detailed):

  • In Shopify Admin: Online Store > Themes > Actions > Edit code > Assets > theme.css.
  • Add CSS to set .wrapper to max-width: calc(100% - 2px) !important and padding: 0 !important. This forces full width and removes side padding.
  • Includes a media query option (@media (max-width: 749px)) to apply changes only on mobile if desired. Media queries let styles apply based on screen size.

Notes:

  • Code snippets are central; they override theme defaults using !important.
  • No confirmation yet from the requester that either solution worked, so the outcome is unconfirmed and the thread remains open.
Summarized with AI on February 25. AI used: gpt-5.
1

Hello,

I am using the pipeline theme.

Is it possible to make my whole website display full width?

Thanks

2

@sumnb0011 - please add this css to the very end of theme.css file and check

.wrapper, .wrapper .grandparent .header__dropdown__wrapper {
    max-width: 100%;}
3

@sumnb0011 , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
.wrapper{
    max-width: calc(100% - 2px) !important;
    padding: 0 !important;
}

@media (max-width: 749px){
    .wrapper{
    max-width: calc(100%) !important;
    padding: 0 !important;
}
}

If you want it only on mobile, you can use this code instead:

@media (max-width: 749px){
    .wrapper{
    max-width: calc(100%) !important;
    padding: 0 !important;
}
}

Kind regards,
Diego