Shopify porto theme desktop banner and mobile banner

Technical Q&A
1

Hi there, I have Porto theme on Shopify. I noticed that the desktop website banner doesn’t display correctly in the mobile view. So question to you is How do I get the mobile view to adjust automatically? Or, How do I set different banners for desktop view and mobile view?

For both, I don’t know where to code this or what the code is.

Can someone help with the code and where it needs to be placed? Thanks

2

Hi @Sri2

Could you share your store URL so I can check?

3

Hi there, website URL is https://karunadawn.com.au

4

I recommend you creat another image for mobile device, because if we add code to make image look same on desktop then it will be like this

Screenshot 2024-07-04 at 10.15.34.png
Screenshot 2024-07-04 at 10.15.34.png499×582 117 KB

5

Thank you but how do I code it so that the mobile banner appears when viewing on mobile? What code do I use to do this?

Creating the other mobile image is not the problem - it’s coding so that I’m able to use 2 different banners. I hope that explains it better.

6

You can create a banner for your mobile and then add this code to your theme.liquid file, after in Online Store

@media (max-width: 749px){
#shopify-section-1495691614906 .slide-bg {
    background-image: url(your-image-banner-for-mobil-url) !important;
}
}
7

Thank you I’ll give it a try.