Make collapsible content full width on desktop

In collapsible content section, add the following in customer css:

@media screen and (min-width: 768px) {

  .collapsible-content {

    max-width: 120rem;

    margin: 0 auto;

    padding: 0px 3rem;

  }

  .collapsible-content-wrapper-narrow {

    margin-left: 0px;

  }

}

• Related Articles

• Full width text for image banner on desktop

  In custom css, add the following: @media only screen and (min-width: 750px) { .banner--content-align-left.banner--desktop-transparent .banner__box { max-width: 100% !important; } }

• Make multirow section full width

  In the multi row section, add the following in the custom css: .multirow .multirow__inner { max-width: 100% !important; padding: 0px !important; }

• Make Mega Menu Second Child Horizontal

  In the header, add in custom css as below: @media screen and (min-width: 990px) { .header--top-center .mega-menu__list { display: flex; justify-content: left; flex-wrap: wrap; column-gap: 0; } #MegaMenu-Content-1 .mega-menu__list li:nth-child(2) ...

• Increase Page width

  Go to base.css Find "narrow" Replace with "wide" e.g: .page-width--wide { max-width: 72.6rem; padding: 0; }

• Create a Video with Text Section

  Create a new section with this code, called "video-with-text.liquid" {{ 'component-video-with-text.css' | asset_url | stylesheet_tag }} <div class="video-with-text {% if section.settings.full_width %}video-with-text--full-width{% else %}page-width{% ...