Solved

Make Image Banner slidable back and forth

Headlok
Tourist
16 0 1

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.

Screen Shot 2023-10-11 at 4.11.12 PM.pngScreen Shot 2023-10-11 at 4.11.28 PM.png

Accepted Solution (1)
theycallmemakka
Shopify Partner
1157 249 267

This is an 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:

makkaomakka_1-1697173374366.png

 

 

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

 

Best Regards

Makka

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store

View solution in original post

Replies 12 (12)
Headlok
Tourist
16 0 1

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

theycallmemakka
Shopify Partner
1157 249 267

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

 

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
Headlok
Tourist
16 0 1
theycallmemakka
Shopify Partner
1157 249 267

This is an 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:

makkaomakka_1-1697173374366.png

 

 

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

 

Best Regards

Makka

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
Headlok
Tourist
16 0 1

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?

theycallmemakka
Shopify Partner
1157 249 267

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

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
Headlok
Tourist
16 0 1

products, our story, and contact

theycallmemakka
Shopify Partner
1157 249 267

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

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
Headlok
Tourist
16 0 1

Screen Shot 2023-10-13 at 12.33.43 AM.pngScreen Shot 2023-10-13 at 12.33.54 AM.pngScreen Shot 2023-10-13 at 12.34.05 AM.png

theycallmemakka
Shopify Partner
1157 249 267

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.

makkaomakka_0-1697175564700.png

 

 

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
Headlok
Tourist
16 0 1

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. 

theycallmemakka
Shopify Partner
1157 249 267

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


❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store