WordPress.org

Forums

Jetpack by WordPress.com
Carousel displaying under the bottom of the screen (6 posts)

  1. Delltar
    Member
    Posted 1 year ago #

    I am having an issue with jetpack photo carousel. It loads and everything, but it's contents display very low, almost under the visible area of the site. Images as well diplay too big.

    I am using Bootstrap based theme if that helps.

    Screenshots:
    https://www.dropbox.com/s/t5mikxr3g9gwqxd/Screenshot%202014-03-09%2019.04.11.png
    https://www.dropbox.com/s/ga9ec7lxp3jhxv6/Screenshot%202014-03-09%2019.04.23.png
    I have manually disabled comments, they don't show on purpose.

    https://wordpress.org/plugins/jetpack/

  2. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Could you post your site URL here, so I can have a look?

    If you want it to remain private, you can also contact us via this contact form:
    http://jetpack.me/contact-support/

    Make sure to include a link to this thread in your message.

  3. Delltar
    Member
    Posted 1 year ago #

    Thank you so much for your answer.
    The url is http://roverground.cz/2014/03/10/svedectvi-o-syrskych-uprchlicich-v-turecku-2/ for example.

    I've investigated some more and found out, that Bootstrap is probably in some sort of "argument" with Jetpack Carousel (based on some other user forum question about other, similar plugin).

    After some investigation, I have found that somehow output code includes stuff like:
    <div class="jp-carousel-slide" style="left: 0px; background-size: 100%; width: 1024px; height: 674px; top: 2081px; position: fixed; -webkit-transform: translate3d(-942px, 0px, 0px); background-position: 50% 50%;"><img src="http://roverground.cz/wp-content/uploads/2014/03/Untitled-Scanned-82-e1394504227492.jpg" style="width: 100%; height: 100%;"></div>
    As you may notice, the "top: 2081px" might be source of the problem.

    This problem occurs on more occasions, like <div class="jp-carousel-info" style="top: 4821px; left: 110px; right: 110px;">

    So far I edited plugin css file, hardsetting top values as !important but that is no long term solution.

    Thank you in advance for any help, I am struggling with this for days now and it seems to be way beyond my skills :)

  4. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Hi!

    Could you undo your changes so I can try to figure out a better solution (such as modifying your theme's CSS, maybe)? It'd be easier to work with it without your changes.

    Thanks!

  5. Delltar
    Member
    Posted 1 year ago #

    I have reuploaded clean Jetpack and moved stuff around in my header.php and now it seems to work on 1080p screen but still doesn't on 1366x768 That is quite weird...

  6. Richard Archambault
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    Hi,

    I see this when trying to view a slide:

    <div class="jp-carousel-slide selected" style="left: 0px; background-size: 100%; width: 1024px; height: 684px; /* top: 2076px; */ position: relative; -webkit-transform: translate3d(768px, 0px, 0px); background-position: 50% 50%;"><img src="http://roverground.cz/wp-content/uploads/2014/03/DSC_4289-e1394503086732.jpg" style="width: 100%; height: 100%;"></div>

    So it looks like you modifed the CSS to hard-code a vlue, but tried commenting it out? Unfortunately, it still seems to be taking effect, at least in Chrome, even though it apepars commented out. Can you remove whatever changes you made again, so I can look again?

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