How to make a separate image for mobile banners ?

Hello I am wondering how to fix these issues:

on my main page: Main Landing Page .. The Spring Sale banner shows cut off on Mobile. I learned how to use a code to show the full length but it does not look nice. So I created a mobile version of the banner which is a smaller width that would be better. However, I do not know how to put that mobile version on mobile. I want to keep the big one for desktop and show the small version on mobile devices.

Please help!!

I also have another banner above any collection that is like a “benefits banner” It says Free Shipping, Premium Quality and things like that. I want to do the same with this banner as well:

Top of Collections

I am using a premium theme called Avone from themeforest

Hi @bkmotive22 ,

kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
However this seems code change If you need help from our expert, kindly share your request.

please add me as a staff following below steps as mentioned in link.

https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts

to my email

Feel free to write if you have any further questions or queries.

We will check it and give you a detailed solution. We’re looking forward to working with you.

I have the links posted there. and one moment let me try to do that.

Please send me a way to contact you so we can do this at a proper time.I don’t want to give access for too long or wait for a whole day to pass. please tell me when you are available to help