Different image and banner size on desktop and mobile

[kisslandbeauty_]

I'm trying to create a website that displays different image banner and slide sizes on desktop and mobile. I've designed the desktop view to my liking, but when I switch to mobile view, the top slideshow and two image banners appear too large. How can I adjust these sizes for desktop without affecting the mobile view?

www.kisslandbeauty.com

[Moeed]

Hey @kisslandbeauty_ 

Your store is password protected, can you share the password as well?

Best Regards,

Moeed

[kisslandbeauty_]

pass: dausaw

[Moeed · Accepted solution]

Hey @kisslandbeauty_ 

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) {
.slideshow__media.banner__media.media img {
    height: 240px !important;
}
.banner__content {
    display: none !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[kisslandbeauty_]

So it doesn't work or not sure but its a slideshow not the banner section

[kisslandbeauty_]

It worked thanks!

[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.

[DaisyVo]

Hi @kisslandbeauty_ 

Could you please share the store password with me? 

 

Thank you!

Best,

Daisy - Avada Support Team.

[kisslandbeauty_]

password: dausaw

[Dan-From-Ryviu]

Hi @kisslandbeauty_ 

Please create 2 Image banner sections, then add this code to Custom CSS of each section. 

• Add this code to a desktop section so it will hide on mobile. 

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

• Add this code to Custom CSS of section for mobile 

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

[kisslandbeauty_]

Tried adding it but it gave me an error. Where exactly would I apply this at?

[kisslandbeauty_]

when I apply that it removes the banner

[Dan-From-Ryviu]

Create 2 image banner sections and add CSS code to Custom CSS of each section 

[kisslandbeauty_]

what if its a slide show banner because it still doesn't work

[Dan-From-Ryviu]

Please use those codes for the slideshow

• Mobile section 

@media (min-width: 750px) {
slideshow-component { display: none; }
}​

• Desktop section 

@media (max-width: 749px) {
slideshow-component { display: none; }
}​