• Resolved Gilly75

    (@gilly75)


    Hi

    Jetpack Carousel in desktop displays my images correctly except that under my caption a comment form displays which I do not want. However when viewed on a mobile phone (iphone & andriod) the carousel image back and forward arrows are missing, the caption displays some way down the page along with metadata and ‘view full size”, and a comment form flashes up and tries to load but fails. All I want to display is the carousel image viewer with its back and forward image arrows, and my caption (I want the same for desktop and mobile device).

    When I add this css:

    .jp-carousel-left-column-wrapper, .jp-carousel-image-meta {
    	display: none;
    }

    the desktop displays Carousel correctly but not mobile devices – here are still no carousel back and forward image arrows, only the image displays with nothing underneath at all. I need my captions to display. Is there a css for display arrows and captions?

    I tried the Jetpack “configure mobile theme” but it made no difference.

    I’m using the Ubud WordPress theme which is meant to be responsive and recommends Jetpack carousel.

    Any and all help much appreciated,
    Thank you
    Angela
    `

    https://www.ads-software.com/plugins/jetpack/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    a comment form displays which I do not want.

    You can follow the instructions here to hide the comment form:
    https://jetpack.me/2013/05/01/remove-comments-carousel/

    when viewed on a mobile phone (iphone & andriod) the carousel image back and forward arrows are missing, the caption displays some way down the page along with metadata and ‘view full size”

    That’s indeed by design. On mobile, your readers can swipe from one image to the other. We’ve removed the arrows and placed the meta data a bit downer so the images can be as big as they can on mobile.

    If you were to add the arrows on both sites, and the meta data in a visible portion of the screen, there wouldn’t be much room left for the images themselves, especially on smaller mobile screens.

    a comment form flashes up and tries to load but fails.

    I can’t seem to reproduce this on my end. I wanted to check things on your site as well, but you seem to be using a maintenance plugin to restrict access to your site.

    All I want to display is the carousel image viewer with its back and forward image arrows, and my caption (I want the same for desktop and mobile device).

    You can overwrite the look of the carousel on desktop and on mobile with some custom CSS. You can add that CSS to your custom CSS editor, available under Appearance > Edit CSS in your dashboard, and make sure you’ve checked the mobile compatible option on the right side of the page.

    I hope this helps.

    Thread Starter Gilly75

    (@gilly75)

    Hi

    Thank you. You can see the carousel on my website here Unfortunately the images on the carousel on mobile do not automatically resize for the screen, they are very small. Too small for me to display my images on. The theme I am using is responsive and recommends Jetpack Carousel but I do nto think it is working correctly. Also in mobile view the captions appear a looong way down the page not under the image so you have to scroll to find it if you know to go and look for it. Is this a fault in Jetpack Carousel ie the images displaying tiny on mobile and the captions appearing a long way down the page, or is the theme I have chosen – Ubud – just not responsive?

    Thank you
    Angela

    Thread Starter Gilly75

    (@gilly75)

    Hi again

    I have the images displaying now and the captions on desktop and mobile. The problem with the comment form remains. I have added the function php at the link you gave here to disable the comment form:
    https://jetpack.me/2013/05/01/remove-comments-carousel/
    however I still have a message flashing up each time that reads “Loading comments” – comments are unable to load so the screen jumps.
    Can you let me know how to get rid of “Loading comments” please. I see my original question was marked as resolved so should I ask this again as a new question?

    Thank you
    Angela

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    the images on the carousel on mobile do not automatically resize for the screen, they are very small.

    I had a look at your site, and the images appear to be displayed correctly. They can’t be bigger, or they would be too large for the screen or would be distorted.

    Also in mobile view the captions appear a looong way down the page not under the image so you have to scroll to find it if you know to go and look for it. I

    I believe this is the intended behaviour. Since there are portrait pictures in that gallery, the captions have to be low enough not to overlay the portrait pictures. It’s not perfect when looking at landscape pictures but this helps the layout to stay consistent when you slide to the next image.

    Can you let me know how to get rid of “Loading comments” please

    Could you try adding the following to your custom CSS editor?

    #jp-carousel-comments-loading { display: none !important; }

    Thread Starter Gilly75

    (@gilly75)

    Hi Jeremy

    Thank you the CSS addition has stopped the comment form from trying to load. The large gap from image to caption isn’t there now – I think it was trying to allow space for metadata or comment to load.

    Thanks again for your help in fixing this on my site
    Angela

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Carousel not displaying correctly’ is closed to new replies.