Jetpack by WordPress.com
[resolved] Display Carousel Images Full-Width on Mobile/iPhones? (2 posts)

  1. WPMonkeyATL
    Posted 1 year ago #

    Is there a way (e.g. maybe via CSS?) to force the Carousel to display images using the full-width of the screen on mobile/iPhones?

    Currently, the carousel uses part of the mobile screen width to show a portion of the adjacent left/right images plus the left/right navigation arrows, leaving the main image displayed in the center to be smaller than the full width of the screen. Would be nice to allocate the entire available screen width to the main image to maximize visibility on mobile devices.

    For an example of how carousel currently displays images at less than full screen width on mobile (with portions of adjacent images), see this link on your phone:

    Might there be an easy adjustment to achieve this?

    Thanks in advance.


  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    If you want to change the look of the carousel, you can dequeue Jetpack's Carousel scripts and styles, and load your own custom styles instead.

    You can use the following functions to dequeue the Carousel scripts:

    function changejp_dequeue_styles() {
        wp_dequeue_style( 'jetpack-carousel' );
        wp_dequeue_script( 'jetpack-carousel' );
    add_action( 'post_gallery', 'changejp_dequeue_styles', 1001 );

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Jetpack by WordPress.com
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.