Images pushed down

  • Resolved leojez

    (@leojez)


    9 years, 5 months ago

    Hello,

    I have just updated to the latest version of WP and Image Flow and the result has been my image flow is now misaligned.

    Please see the top image flow on this page:

    http://www.j-hangarspace.jp/

    As you can see it has been pushed right down. I have tried applying “top: -150px;” to the following in the CSS:

    .wpif2_images img
    .wpif2_captions
    .wpif2_scrollbar

    but the images got cropped and didn’t move up. Would you be able to help me? Here is the current CSS:

    .wpif2_images img {
    border: none;
    color: #ffffff;
    /*width: 100%;*/
    }

    .wpif2_captions{
    font-weight: bold;
    position: relative;
    text-align: center;
    z-index: 10000;
    }

    .wpif2_scrollbar{
    visibility: hidden;
    position: relative;
    border-bottom: 1px solid #b3b3b3;z-index: 10001;
    }

    .wpif2_slider{
    position: absolute;
    margin-top: -7px !important;
    margin-left: -7px;
    z-index: 10002;
    background-image: url(../img/slider.png);
    background-repeat: no-repeat;
    width: 14px;
    height: 14px;
    }

    Thank you!

    https://wordpress.org/plugins/wp-imageflow2/

Viewing 12 replies - 1 through 12 (of 12 total)
  • Bev

    (@bstofko)

    9 years, 5 months ago

    Try adding margin-top: -150px to .wpif2_images

    Thread Starter leojez

    (@leojez)

    9 years, 5 months ago

    Hi,

    Thanks, that worked! However, I have another image flow on the same page right at the bottom:

    http://www.j-hangarspace.jp/

    Doing this has cut the tops of the images (before they were fine).

    Any ideas?

    Thank you!

    Bev

    (@bstofko)

    9 years, 5 months ago

    You can target the specific gallery using the ID #wpif2_images_1

    Thread Starter leojez

    (@leojez)

    9 years, 5 months ago

    Hi Bev,

    Thank you again for your reply. I’m sorry but I am not sure what you mean. I have the correct images showing but the image flow at the bottom of my page is showing the images with the tops cut off:

    http://www.j-hangarspace.jp/

    Is there any way I can fix this?

    Many thanks,
    Jeremy

    Bev

    (@bstofko)

    9 years, 5 months ago

    Your CSS would be:

    #wpif2_images_1 { margin-top: -150px; }

    This will only apply to the top gallery since it specifies the gallery instance in the ID.

    Thread Starter leojez

    (@leojez)

    9 years, 5 months ago

    Thank you very much Bev! That did the trick!

    Thread Starter leojez

    (@leojez)

    9 years, 5 months ago

    Hi Bev,

    Just found out, although the image flows look fine in Chrome and Firefox, they have issues in Internet Explorer:

    http://www.j-hangarspace.jp/

    The top one is still pushed down and the bottom one has disappeared.

    Any ideas on how to fix for IE?

    Thanks!

    Bev

    (@bstofko)

    9 years, 5 months ago

    It looks fine to me on IE9. Did you refresh your browser?

    Thread Starter leojez

    (@leojez)

    9 years, 5 months ago

    Of course, so simple. I should have realized.

    Thanks again Bev!

    Thread Starter leojez

    (@leojez)

    9 years, 5 months ago

    Hi Bev,

    Sorry, another issue. The image flow seems to be obstructing my side menu:

    http://www.j-hangarspace.jp/

    The left-side menu first 3 items (Early SDF History, Order of Battle, Squadron Histories) are unclickable. When I deactivate the image flow plugin the are fine.

    Any ideas?
    Thanks.

    Bev

    (@bstofko)

    9 years, 5 months ago

    Setting #wpif2_flowplus_1 {height: 300px !important;} should fix that.

    Thread Starter leojez

    (@leojez)

    9 years, 5 months ago

    Brilliant! Thanks ever so much Bev!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Images pushed down’ is closed to new replies.