it's been more than 3 weeks I was trying to find out the solution for this matter, I did tried many other different method but they were compromising the quality of banner. Thank you so much for providing the right directions.
IT WORKED!! If I could kiss you right now I would!! LOL! 🤣I do not understand why all website themes are not coded this way! 60% of consumers use their phones when they're looking online, I don't get it. I have been losing my mind trying to find a mobile first theme that I like, then changing all of my images to fit the Dawn theme so they somehow still look good on both mobile and desktop, then starting all over using about 30 different themes but just wanting the simplicity of Dawn. There are so many other tutorials that I've tried and they do not work, you explained it well and...it WORKED! THANK YOU SO SO SO SO MUCH!
Thank you for creating this tutorial. I found a different solution to this first, but when I applied it the image for desktop ended up losing quality, so it looked blurry. I couldn't figure out how to fix it. Your solution is a bit more complicated, but it is still pretty simple, and it works without sacrificing image quality. The only part of your tutorial I had a little trouble with was finding the div ids, especially the one for mobile. But after carefully going through all the sections of the code in the inspection pane I was able to identify the correct codes. It looks beautiful. Thanks again for doing this.
I can't find the section id. I mean, I followed all the steps, but there is no ID, only text. There are no numbers 😢 Plz help, it's been almost 2 weeks I am facing this problem
Sir it worked of one image banner. But what if i have to add one more banner ... do i'll have to duplicate code in the base.css and update the ids etc ( but it did not worked i tried) Please answer @@WebSensePro
Hello, Thank you for your comment....I couldn't fix it... Can you help me with debugging? I am using sense. In the mobile view, it shows both the images but while inspecting it disappears. I tried with different browsers, but it did not help.
Thank you! Is it possible to do this for multiple banners at once? If I was to add the code twice? Or does it just work one for desktop and one for mobile?
Thank you for this tutorial, it works for my desktop however when I am on mobile it is still showing me the two banners, any advice on how to fix this?
Sorry if this is a stupid question, but will this work on different sections? Would I just repeat what I did the first time using different section IDs? I'm so excited.
I'm running into an issue with this code because it uses section IDs, which change when I duplicate the theme. I'm using Dawn 12.0. So each time I update the site and create a duplicate, the banners break and I have to re-inspect to find the new IDs. Is there a workaround to avoid this problem? Thanks!
Thank you so much my problem is solved I am using impulse theme so the process and steps were not the same and effective but your logic of showcasing two banners and hidding one has solved the problem
Hi! Thank you so much I finally solved the problem Ive been craving for!! I just want to ask if there is also a way to display 2 banners each separately from mobile and desktop. Thank you so much!!!
Thanks for the video! Great - really useful guidance. I have given it a go and my desktop image does not appear in my 'mobile view'- that's great. However, I can still see the mobile image on my 'desktop' view. Any ideas on how I may keep my desktop image only in desktop and mobile only image in mobile view? thanks again.
Hello works perfectly if I resize the window on the Desktop. But if I open it on the phone it still shows both sections. I am using an Iphone 13 Pro Max. Do you have any fixes for that? :( Best regards
Hi! I am trying this but when I click on customize I have different options than what you show. Mine says image with text overlay and when I click it there is only one image option. Is this my theme?
IDK but is not working 4 me ;C, the mobile image appears in my settings but when i select once to use it at mobile users, once i watch in my celphone the image just doesnt show
Hi, Thank you for this video, its great! - i have a different image banner on each page of my collections and would like to use this methose for desktop/mobile images. Would i need to copy your code multiple times into BASE.CSS and add each individual banner code? will that work. Please help. Thanks :)
Sir it worked of one image banner. But what if i have to add one more banner ... do i'll have to duplicate code in the base.css and update the ids etc ( but it did not worked i tried)
Hi, I've implemented working perfectly thanks... Can you also pls share how can I do the same in collection page as well different image in desktop and different image on mobile.... Also I've seen your collection banner image video tutorial which implemented and working well ❤
Hello, the destop banner version is too wide. Is there a way to narrow a bit so it can match the products wifht just below it? Also, what are the recomended sizes for both mobile and desktop banners? Tahnk you a lot, your work is just amazing!
hello, i would like to do the same of this video but instead of being images i would like them to be background banner for different for the mobile and computer? how could i do it?
Ive used this and it works on desktop but when I check my website on my phone the mobile version shows both banners... I've checked the editor on shopify and the mobile and desktop versions are working... Not sure what to do to make my banner work on my mobile ☹️
