Full width text for image banner on desktop

Full width text for image banner on desktop

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



    • Related Articles

    • Different height for mobile and desktop hero image banner

      1. In the section, custom CSS 2. Insert the following code: @media screen and (max-width: 749px) { .banner__media { padding-top: 10%; padding-bottom: 10% !important; } }
    • How to make image-with-text image smaller

      In the custom css of the section, add in: .image-with-text .image-with-text__media-item.image-with-text__media-item--small img { height: 70%; width: 70%; margin: 15%; }
    • 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; } }
    • 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{% ...
    • How to change another image for image banner in mobile view

      In theme.liquid, add the followings: <style> #shopify-section-ID { @media (max-width: 768px) { .banner__media { content: url("image URL") !important; } } </style>