Sense Theme: I want to add different mobile banner slideshow

kumargaurav
Shopify Partner
5 0 0

I want to create different mobile banner with square size and keep different desktop banner.

Reply 1 (1)

PageFly-Amelia
Navigator
316 96 138

Hello @kumargaurav 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Select two images like as shown below. The first image is for desktop, the second is image for mobile

PageFlyAmelia_0-1711340793027.png

Step 2: Online Stores > Themes > Edit code

Step 3: Choose file theme.liquid

Step 4: Add code above the tag </head>

<style>
@media only screen and (max-width: 767px) {
   .banner .banner__media:first-child {
      display: none !important;
   }

   .banner .banner__media:nth-child(2) {
      width: 100% !important;
   }
}
@media only screen and (min-width: 768px) {
   .banner .banner__media:first-child {
      width: 100% !important;
   }

   .banner .banner__media:nth-child(2) {
      display: none !important;
   }
}
</style>

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.