Adjust slider image for mobile and tablet device

Hi,

Please see FAQ for complete details: https://www.metaslider.com/faqs/the-responsive-slider-doesnt-quite-look-right-on-a-mobile-device/.

Regards,
Bryle

Thanks @bcrodua for the info, ??

I’m trying to set up the issue of slider image for mobile device following the steps you mention, I have this short code slider to insert only in mobile device, Metaslider plugin shortcode: [metaslider id=”399″]

<?php echo do_shortcode(‘[metaslider id=”399″]’); ?>

Then setup your shortcode like this:

[device][/device] [notdevice][/notdevice]

Sorry I’m not technical guy… could you tell me how to add as a CSS additional this shortcode:[metaslider id=”399″] only for mobile device ?

Thanks in advance!
Regards,
Alexis

• This reply was modified 4 years, 10 months ago by alexisvisa.
• This reply was modified 4 years, 10 months ago by alexisvisa.
• This reply was modified 4 years, 10 months ago by alexisvisa.

Hi,

You try and add the custom CSS below to your child theme.

/* Display the slideshow on mobile only */
@media (min-width: 768px) {
#metaslider-id-399 {
display: none !important;
}
}

Regards,
Bryle

Thanks bcrodua (@bcrodua)

but this custom CSS is not working for me. I can’t fix it.

It’s possible for example not to view the slider homepage on mobile device in the meantime? do you know how can I do it?

Hi @bcrodua ,

I have 2 sliders with metaslider plugin.
1. slider: [metaslider id=”397″] is active for all devices but I’m not allowed to disable (smart pad) option, so in mobile device image is cut.

2. slider [metaslider id=”397″] is not active in any device and I only want to active for mobile device, I have created a correct size for mobile.

Do you know how can I do that? CSS aditional?

Thanks

Hi,

If you check Bryle’s message you just need to update the ID to the ID of the slideshow you want to show on mobile only:

@media (min-width: 768px) {
  #metaslider-id-397 {
    display: none !important;
  }
}

Then to hide the other slideshow on mobile, just reverse the logic. Update the ID and instead of min-width, change it to max-width: 768px

Hi @kbat82,

Thanks for your reply, yes I’m trying but is not working please find image below:

https://snipboard.io/GgFaj5.jpg

The slider is not changing for mobile device.

[metaslider id=”399″] is the one I want to active for mobile. only.

Just based on your screenshot the CSS looks incomplete. The code block above what you circled doesn’t have a closing bracket }?

Thanks for the reply @kbat82 yes I added and is not working neither:

https://snipboard.io/Z09Bho.jpg

• This reply was modified 4 years, 10 months ago by alexisvisa.

You added it at the end though, so now you have the code we gave you placed inside the previous rule. That will never work. You have to properly nest your CSS.

Ok, now the metaslider id=397 has disappeared from the mobile and tablet device but the metaslider id=399 for mobile does not appear.

https://snipboard.io/PBm0va.jpg

I have to add both metasliders id=397 and metasliders id=399 here? please see below link:

https://snipboard.io/AGKxNp.jpg

Thanks!