Bad resolution of the slides on mobile

  • Resolved michalrydzi

    (@michalrydzi)


    4 years, 2 months ago

    Hello,

    I need help with the settings of my slideshow. Desktop version looking good, mobile is pixelated. I got advice to create two identical slideshows and implement these attributes:

    `/* Hide on desktop – Display the slideshow on mobile only */
    @media (min-width: 768px) {
    #metaslider-id-100 {
    display: none !important;
    }
    }
    /* Hide on mobile – Display the slideshow on desktop only */
    @media (max-width: 767px) {
    #metaslider-id-101 {
    display: none !important;
    }
    }

    Both of my slideshows have parameters 700 width and 300 height.

    After all these settings I got desktop version correct, but on the mobile, I got two identical pixelated slides under each other.

    Maybe to somehow change the settings of the mobile slideshow to fit these parameters?

    Thanks for the advice.

    Michal

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hi Michal,

    Yes, exactly, you need to adjust the setting in the slider shown on the mobile devices to make it look better.

    You may change the height and width in the slider settings to get better resolutions for the images.

    Thanks.

    Thread Starter michalrydzi

    (@michalrydzi)

    Tried several combinations and nothing helped. All I’m getting is one or two slides on mobile, both pixelated.

    Should code in header look like this?

    <?php esc_html_e( ‘Skip to content’, ‘zubin’ ); ?>
    <?php echo do_shortcode(‘[metaslider id=”92″]’); ?><?php echo do_shortcode(‘[metaslider id=”143″]’); ?>

    Both slides on the same row (tried also under each other with the same results).

    Forgot to mention I need this slides on the whole width of the screen on each device.

    It looks like an issue with an image CDN. Maybe from another plugin?

    Thread Starter michalrydzi

    (@michalrydzi)

    Im using an editor build in the template of my page + Simple Custom CSS for this code you advices me.

    The CDN is called optimole. If it’s not a plugin then something integrated in your theme? Look around for an options area related to this.

    Thread Starter michalrydzi

    (@michalrydzi)

    Got Optimole too, sorry.

    Check the options to disable images used in MetaSlider. If there’s no option, you might need to ask their support.

    If they can’t help with an option ask them if they have some programming way to disable it for MetaSlider and I’ll work it out.

    Thread Starter michalrydzi

    (@michalrydzi)

    Solved by deactivating Optimole. Pictures now editable and code working.

    Thank you very much.

    No problem. If you’re fine disabling it then that works. If you decide you need that plugin let me know and I can help get it working.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Bad resolution of the slides on mobile’ is closed to new replies.

Tags