Jetpack adding inline CSS to slider

  • Resolved cpthomas1990

    (@lechuck)


    2 years, 9 months ago

    Hi,

    I am having trouble with the Jetpack slider added via the Gutenberg block editor. When the slider loads on a portrait tablet its width is 100% of the viewport. When the tablet is rotated 90 degrees to landscape, the slider remains at the same width as the portrait width, adding white space either side of the slider.

    From inspecting the code, it seems Jetpack is adding inline CSS to the ul > li elements which contain the slider images. Specifically I believe the issue is a ‘width: XXXXpx’ property being added, where the ‘XXXXpx’ width is always the width of the viewport. I think to resolve the issue I need the width to be set to ‘100%’.

    Does anyone know any way I can disable inline CSS on the Jetpack slider? That way I could add the CSS rules via my own stylesheet. I have tried using !important to override the inline CSS but to no avail ??
    I have also disabled Site Accelerator and Lazy Loading in the Jetpack settings.

    Thanks,
    Chris

    • This topic was modified 2 years, 9 months ago by cpthomas1990.
    • This topic was modified 2 years, 9 months ago by cpthomas1990.
Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @lechuck

    Could you share the code you are using, please?

    Could you please post your site URL here so that we can have a look?

    If you want it to remain private, you can also contact us via this contact form. If you choose to reach out directly, please include a link to this thread.

    Thanks!

    Thread Starter cpthomas1990

    (@lechuck)

    Hi Michelle,

    Thank you for your response. I will have to message you privately as the project is not live yet.

    Thank you

    Plugin Support MadHatter (a11n)

    (@madhattersez)

    Thanks for that!

    I’ll go ahead and close out this thread and we will respond to your ticket from here.

    Have a safe rest of the week.

    Thread Starter cpthomas1990

    (@lechuck)

    Just to follow up on this, using either of the below CSS rules fixed the issue for me. Tested on iPad and iPhone – the slider images now scale up and down no problem.

    ul.wp-block-jetpack-slideshow_swiper-wrapper[style],
li.wp-block-jetpack-slideshow_slide {
    width: 100vw !important;
}

.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure .wp-block-jetpack-slideshow_image {
    width: 100vw !important;
}

    Thanks,
    Chris

    • This reply was modified 2 years, 9 months ago by cpthomas1990.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Jetpack adding inline CSS to slider’ is closed to new replies.