How to make my guarantee widgets scroll on mobile

[DaveyAlcatraz]

Hi everyone

I am currently using the bullet theme and I noticed something in another website completely unrelated to my industry that would be really great to implement. To ensure there is no confusion I have added photos, please help mimic the second and third images effect of a horizontal carousel style scrolling guarantee widget on mobile only rather than consecutive images you scroll through vertically.

[BSSCommerce-B2B]

Hi @DaveyAlcatraz,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file app.css

Step 3. Add this code at the end of file

@media only screen and (max-width: 768px) {
  .guarantee x-grid {
     display: flex!important;
     overflow: scroll!important;
   }
}

Result

[BSSCommerce-B2B]

If you don't want to show the scrollbar please change the code like this

@media only screen and (max-width: 768px) {
    .guarantee x-grid {
        display: flex !important;
        overflow: scroll !important;
    }
    .guarantee x-grid::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari and Opera */
    }
    .guarantee x-grid {
        -ms-overflow-style: none !important; /* IE and Edge */
        scrollbar-width: none !important; /* Firefox */
    }
}

Result

If it helps you, please like and mark it as the solution.

Best Regards

[DaveyAlcatraz]

Hi, 

i appreciate that a lot, do you have any idea why this would happen? i’d like each widget to be the same size, all of the files are 300 x 300 px

[BSSCommerce-B2B · Accepted solution]

@DaveyAlcatraz, please add another code after the previous one.

All the code after changing will look like this

@media only screen and (max-width: 768px) {
    .guarantee x-grid {
        display: flex !important;
        overflow: scroll !important;
    }
    .guarantee x-grid::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari and Opera */
    }
    .guarantee x-grid {
        -ms-overflow-style: none !important; /* IE and Edge */
        scrollbar-width: none !important; /* Firefox */
    }
    .guarantee x-grid picture {
        min-width: 150px;
    }
}

Result

[DaveyAlcatraz]

Thanks so much you are such a legend!!

[BSSCommerce-B2B]

It such my honor to help you bro 😍