How to display different slideshow banners for desktop and mobile versions

[ParadiseMedia]

Hi everyone, hope you are having a great day. When I open the store in a mobile device the banner looks cropped because is larger and obviously doesn’t fit the size of the mobile version display. I would like to kindly ask if anyone knows how can I be able to set up one file (design) for the desktop banner, and a different one for the mobile version banner. I am using the Taste theme. And the URL is: paradise-backdrops.myshopify.com or paradisebackdrops.com.

Note: Right now the one I have published in the mobile version looks good because is the one that is supposed to be for mobile devices and it looks bad in the desktop version but I have it this way right now because I’m running marketing campaigns and getting a lot of mobile traffic.

[biznazz101]

Hello, you can add this code to your base.css file to hide a section on mobile, you just need to insert the specific section ID. The same code can be adjusted to hide a section on desktop by changing the amount of px.

<!-- CONTACT @biznazz101 FOR HELP WITH YOUR STORE --> 

@media screen and (max-width:749px){
#shopify-section-template--11101274990728__ed564e79-f18f-4564-b421-0ab4e6fc975c {display:none; visibility:hidden;}
}

 
I hope that helps!
@biznazz101

[ParadiseMedia]

Hi @biznazz101! Thanks for your response and your help. But why do I need to hide a section? I just need to display one .jpeg file as the main banner for desktop users and a different .jpeg file for the mobile version.

Regards,

Rafael

[biznazz101]

Hello, so the reason for hiding the section is to display different content based on screen size/device type. The section shown will change based on that and display the two images as you'd like.

It can be done without having to hide a section, as a single section that changes based on device type but it would need to be coded into the theme files to accomplish this, and might be a little more complex.

If you are using an image banner section you can add the two images, one for mobile, one for desktop. Then use this code by going to theme.liquid and paste this code before </head>. This will essentially have the same effect (hiding an image), but it is only one section instead of two.

<--- This Should Hide The Second Image On Mobile, And Hide First Image On Desktop. You may have to adjust the PX value to get things the way you want them. --->
<style>
@media only screen and (max-width: 500px) {
.banner .banner__media:first-child {
display: none !important;
}
@media only screen and (min-width: 600px)
.banner .banner__media:nth-child(2) {
width: 100% !important;
}
}
</style>

Hope that helps!
@biznazz101 

[ParadiseMedia]

Hi @biznazz101 hope you are doing excellent. I tried adding the code but didn't work. Not sure if maybe is because the section is a "Slideshow" section. I attached 2 screenshots of the desktop version and mobile version and how those main slideshow banner files are looking. In the desktop all cropped and in mobile is looking good.

[biznazz101]

Yes, my mistake I thought you were referring to the "Image Banner" section type. No problem, I will fix this for you (at no cost to you) if it is okay with you.

I will send an access request to your store it should be visible in your store notifications (bell icon). I just need the collaborator access code this can be found under Settings>Users and Permissions. Feel free to message me directly with this information if that is more convenient.

Thanks!
@biznazz101 

[Fije]

Hey! 
Can you share the same for taste theme? As in show different slideshow images for Mobile and Desktop