Make Image Banner slidable back and forth

[Headlok]

Hello,

Im having an issue with the image banner that is too small on mobile. It looks perfect on web but shrinks too small on mobile. Can I code a feature on that image on mobile so it displays a bigger size  but is slidable back and forth so they can actually read the symbols. Similar to a "featured on" banner but it just slides when swiped manually. Hopefully this makes sense. Attached are photos of web and mobile. Thanks 

P.S if anyone has a better way to go about this let me know.

[Headlok]

A detailed guide would be awesome. I am new to CSS and coding on shopify and Im learning slowly. Theme is refresh. Thank you!

[makkaomakka]

Can you provide link to your store? I will review the store and provide solution accordingly

[Headlok]

www.headlokusa.com

[makkaomakka · Accepted solution]

Hi @Headlok ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media only screen and (max-width: 600px) {
  #shopify-section-template--20921987203356__ce8f87cb-4a16-44dd-baf7-867b9320ea3e .img-container img {
      width: auto!important;
  }
  
  #shopify-section-template--20921987203356__ce8f87cb-4a16-44dd-baf7-867b9320ea3e .img-container {
      width: 100%!important;
      overflow-y: auto!important;
  }
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards

Makka

[Headlok]

It worked thank you so much!! Can i ask for another quick favor? I was able to remove page titles on desktop but they are still there on mobile. Any idea why that is?

[makkaomakka]

Can you let me know which titles u are talking about?

[Headlok]

products, our story, and contact

[makkaomakka]

Can you show me a screenshot of the section. I cannot find titles like products, our story, and contact on the mobile device

[Headlok]

[makkaomakka]

Add below code on the theme.liquid to hide all titles. 

h1.main-page-title {
    display: none;
}

You can add this code inside previous code.

[Headlok]

Bro you're are amazing!! thank you so much! Checked out your website and I love it. Will definitely hire you if the business picks up. 

[makkaomakka]

Thank you  🙂
Happy to hear that worked for you.
You can contact me via Upwork or even whatsapp for any customization for bug fixes 🙂