I need help with code that is not mobile friendly. Causing horizontal scroll

Hi! I have determined this trust badge code is causing issues on mobile. It creates a horizonal scrolling.

Can anyone help with this? Thanks in advance!

<!-- Trust Badge created and verified by https://www.brandpush.co -->
<div style="width:100%;margin-top:10px;all:unset;">
  <style scoped>
    .brandpush-logo-container-item {
      height: auto;
      width: 100%;
      position: relative;
      padding: 10px 10px;
    }

    .brandpush-vertical-center {
      height: inherit;
      display: flex;
      align-content: center;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-content: center;
      align-items: center;
    }

    .brandpush-vertical-center img.brandpush-news-logo {
      max-width: 100px;
      max-height: 66px;
      min-width: 50px;
      min-height: 14px;
      height: auto;
      width: auto;
      margin: 7px 10px;
      overflow: visible;
    }

    .brandpush-trust-badge,
    .brandpush-title,
    .brandpush-footer {
      font-family: sans-serif !important;
    }

    .brandpush-title:before,
    .brandpush-title:after {
      content: "";
      flex: 1 1;
      border-bottom: 1px solid #d8d8d8;
      margin: auto;
      width: 27%;
      display: block;
      position: relative;
    }

    .brandpush-title:before {
      margin-left: 30px;
      top: 12px;
    }

    .brandpush-title:after {
      margin-right: 30px;
      top: -13px;
    }

    @media screen and (min-width: 585px) {
      .brandpush-logo-container {
        padding: 0 20px;
      }
    }

    @media screen and (max-width: 584px) {
      .brandpush-news-logo {
        max-width: 70px !important;
      }

      .brandpush-title {
        font-size: 15px;
        top: -5px;
        letter-spacing: 6px;
      }

      .brandpush-title:before,
      .brandpush-title:after {
        border-bottom: none !important;
      }

      .brandpush-leaf {
        display: none !important;
      }
    }

    @media screen and (max-width: 340px) {
      .brandpush-title-hr {
        display: none !important;
      }

      .brandpush-title {
        font-size: 14px;
        padding: 0 !important;
      }

      .brandpush-footer {
        font-size: 11px !important;
        margin: 20px 0 25px 0 !important;
        letter-spacing: 2px !important;
      }

      .brandpush-news-logo {
        max-width: 50px !important;
      }
    }

    .brandpush-logo-container {
      text-align: center;
      margin: 0 auto 0 auto;
      display: flex;
      align-content: center;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
    }

    .brandpush-newslogos {
      display: inline-block;
      position: relative;
    }
  </style>
  <div id="brandpush-trust-badge"
    style="position: relative;width:100%;background:#ffffff;border-radius:10px;min-height:180px;margin-left: auto;margin-right: auto;padding-bottom:12px;">
    <div
      style="text-align:center;padding:0px 5px 10px 5px;font-size: 18px;font-family: sans-serif;font-weight: 600;letter-spacing: 8px;line-height: 1.3;">
      <div style="height: 58px;">
        <span class="brandpush-title" style="z-index: 1; position: relative; padding: 0 20px;margin:0;color:#0e0e0e;">AS SEEN ON</span>
      </div>
      <div class="brandpush-logo-container">
        <img class="brandpush-leaf" alt="Trust Reef" style="position:absolute;height: 110px;left: 25px;margin:0;padding:0;z-index: 0;opacity: 0.2;" src="https://www.brandpush.co/cdn-cgi/imagedelivery/gKm6BYVdHCj_SVQET_Msrw/3fb10293-8878-4ce5-5496-cef376fe9300/public"><img class="brandpush-leaf" alt="Trust Reef" style="position:absolute;height: 110px;right: 25px;margin:0;padding:0;z-index: 0;opacity: 0.2;-webkit-transform: scaleX(-1);transform: scaleX(-1);" src="https://www.brandpush.co/cdn-cgi/imagedelivery/gKm6BYVdHCj_SVQET_Msrw/3fb10293-8878-4ce5-5496-cef376fe9300/public">
        <div class="brandpush-logo-container-item">
          <div class="brandpush-vertical-center"><a
              href="https://www.benzinga.com/pressreleases/24/06/ab39455739/trendy-phone-case-brand-phone-case-for-celebrates-stellar-customer-reviews-and-high-ratings"
              target="_Blank"
              class="brandpush-newslogos"><img alt="Featured on Benzinga" class="brandpush-news-logo" style="margin-right: 14px;" src="https://www.brandpush.co/cdn-cgi/imagedelivery/gKm6BYVdHCj_SVQET_Msrw/ec881fff-1d06-43da-18e1-4460b8922c00/public"></a><a
              href="https://www.barchart.com/story/news/26996567/trendy-phone-case-brand-phone-case-for-celebrates-stellar-customer-reviews-and-high-ratings"
              target="_Blank"
              class="brandpush-newslogos"><img alt="Featured on BarChart" class="brandpush-news-logo" style="margin-right: 14px;" src="https://www.brandpush.co/cdn-cgi/imagedelivery/gKm6BYVdHCj_SVQET_Msrw/d1d24201-6f48-4c9b-6ed2-46464eac1900/public"></a><a
              href="https://www.theglobeandmail.com/investing/markets/markets-news/GetNews/26996646/trendy-phone-case-brand-phone-case-for-celebrates-stellar-customer-reviews-and-high-ratings"
              target="_Blank"
              class="brandpush-newslogos"><img alt="Featured on The Globe And Mail" class="brandpush-news-logo" style="margin-right: 14px;" src="https://www.brandpush.co/cdn-cgi/imagedelivery/gKm6BYVdHCj_SVQET_Msrw/7acfc7a6-2b16-4ba6-01d5-96b99d462f00/public"></a><a
              href="https://www.wicz.com/story/50943042/trendy-phone-case-brand-phone-case-for-celebrates-stellar-customer-reviews-and-high-ratings"
              target="_Blank"
              class="brandpush-newslogos"><img alt="Featured on FOX 40" class="brandpush-news-logo" style="margin-right: 14px;" src="https://www.brandpush.co/cdn-cgi/imagedelivery/gKm6BYVdHCj_SVQET_Msrw/3fc4af63-e906-4112-d141-d504c6ea5c00/public"></a><a
              href="https://www.newschannelnebraska.com/story/50943042/trendy-phone-case-brand-phone-case-for-celebrates-stellar-customer-reviews-and-high-ratings"
              target="_Blank"
              class="brandpush-newslogos"><img alt="Featured on NCN" class="brandpush-news-logo" style="margin-right: 14px;" src="https://www.brandpush.co/cdn-cgi/imagedelivery/gKm6BYVdHCj_SVQET_Msrw/31f90197-ad2e-4772-b420-56e60b9b4a00/public"></a>
          </div>
        </div>
      </div>
      <div style="margin-top:0px;font-family: sans-serif !important;">
        <span class="brandpush-footer" style=" text-align: center; padding: 0 20px; font-size: 13px; font-family: sans-serif; font-weight: 600; letter-spacing: 3px; position: relative; width: 100%; margin: 0 0 8px 0; display: inline-block; color: #a5a5a5;"></span>
        <div
          style="color:#717171;font-size:10px;letter-spacing:0;height: 15px;margin: 3px 0 0 0;display: flex;justify-content: center;align-content: center;align-items: center;">
          <img style="width:12px;margin:0 3px 0 0;" src=""><span style="font-family: sans-serif !important;"></span>
        </div>
      </div>
    </div>
  </div>
</div><!-- End of BrandPush Trust Badge -->

Got a link to your store?

Yes. https://phonecasefor.com - However, I have hidden this section to temp solve the issue.

Let me know if you need me to enable for testing.

Go ahead and re-enable and I’ll take a look

DONE

Looks to me like your problem isn’t in the trust icons, but somewhere else. I think it’s in the “Built for your next epic adventure” section

The issue only appears in the collection pages. Homepage and product pages use pagefly.

If you look closely at your homepage there’s a small horizontal scroll which is what I thought you were talking about

Remove the padding from your .brandpush-footer span and you’ll solve the issue

worked PERFECT!

thank you so much