Change mobile layout of homepage header and slider on Wordpress WooCommerce Storefront child theme

Hi I am using a child theme of Wordpress Storefront theme and am happy with the appearance of the desktop homepage I have constructed. However I am not happy with the appearance of the mobile homepage. I am happy with every page except the mobile homepage... So I only want this job to effect the page I have set as the homepage. When the desktop header image and the slider (MetaSlider) resizes for mobile, it doesn't look as good as I would like. I have attached 3 files... I am hoping someone can make the mobile appearance look like attachment 2. Attachments: 1) Current mobile appearance 2) Mock up of how I would like mobile to look like 3) Current desktop layout (which I am happy with) So this means I need a separate, more mobile suitable slider and some changes to the way the header image displays on mobile. On the mobile version of the homepage, I think the header image needs to be either removed, or replaced with a white image... And also the a separate, more mobile suitable slider needs the top of it to meet the blank/white bottom of the header area and the sides to go full width, all the way to the sides of the website. I am currently using MetaSlider but you don't have to use this one if you know of another that makes the job easier. And you do not need to create the slides... You can just insert random slide images to get the build done, then I will create the official slides once I know what size I am working with. Note: You may want to consider "Wordpress Mobile only & Desktop Only Content" plugin to dictate which slider gets served to mobile/desktop users. On completion of this job I would please like a copy of the code and instructions on where to add it in the future just in case I need it again in the future. Any questions/clarification needed please ask. I would like to pay £30 for this. Thanks for reading!