Shopify porto theme desktop banner and mobile banner

Sri2 · ‎07-03-2024

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

Dan-From-Ryviu · ‎07-03-2024

Hi @Sri2

Could you share your store URL so I can check?

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Sri2 · ‎07-03-2024

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

Dan-From-Ryviu · ‎07-03-2024

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

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Sri2 · ‎07-04-2024

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.

Dan-From-Ryviu · ‎07-04-2024

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

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

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Sri2 · ‎07-04-2024

Thank you I'll give it a try.

Shopify porto theme desktop banner and mobile banner

Shopify porto theme desktop banner and mobile banner

Community Blog Articles