Hi there, I would like to hide the image banner for mobile view. For desktop it is correct.
If possible I would like to place a different image banner for mobile view.
Hope someone can help
1 Like
1 Like
Thank you for your video. I have gone through the steps. I have made all the adjustments for my banners. Still I can see both of them on both desktop and mobile view. Where am I going wrong? What can I do to still set it up correctly? @made4Uo
1 Like
Hi,
I have tried again to make the changes but unfortunately, it did not work. I am trying to make the changes in the banner section. Is it correct that I need to use “image-banner.liquid”?
I have added the following code next to the first “<”: {{ section.settings.show_on_device }}.
Initially, I thought there was a “class” in my code so I tried the first code without adding the following: <div class=“{{ section.settings.show_on_device }}”…
Then, I added the following code with an enter at {% schema %}:
{ “type”: “select”, “id”: “show_on_device”, “options”: [ { “value”: “mobile–device”, “label”: “Mobile and tablet device” }, { “value”: “desktop–device”, “label”: “Desktop device” }, { “value”: “show-all-devices”, “label”: “Show to all devices” } ], “default”: “show-all-devices”, “label”: “Show this section to this device only”, “info”: “Choose which device you want this section to show” }
Finally, I added the following code at the bottom of base.css:
@media only screen and (max-width: 749px) { .mobile–device { display: block !important; }
.desktop–device { display: none !important; } }
@media only screen and (min-width: 750px) { .mobile–device { display: none !important; }
.desktop–device { display: block !important; } }
Could you please help me identify where it’s going wrong? Why am I not able to see the changes on my website? I would appreciate your help.
Thanks.