Different picture for mobile than for desktop (image with text overlay; showcase theme)

[Zuips]

Hey im using the Showcase theme and the Banner i have on my site doesnt work for mobile so i wanted to put a customized picture for the mobile version. Ive found some code to implement but i have a different theme so i dont have the same .css . 

Can you guys help me so i can customize a different picture for the mobile view?  ❤️ thanks in advance

Url www.zuips.com pw: IchwillendlichbeiZuipsshoppen

[Moeed · Accepted solution]

Hey @Zuips 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
#page-content>div:first-child .height--full .rimage-outer-wrapper {
    min-height: 220px !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Zuips]

OMG! Thank you so much! i knew there was a fast fix! 🙂 i dont even have to do a different mobile picture! 🙂 ❤️ very nice thaaanks

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Dan-From-Ryviu]

Hi @Zuips 

You can add 2 image with text sections, one for mobile and another one for desktop, then add those codes to the Custom CSS of each.

• CSS Code for desktop section, it will hide this section on mobile

@media (max-width: 749px) {
.image-overlay { display: none; }
}​

• Code for mobile section

@media (min-width: 750px) {
.image-overlay { display: none; }
}​