WordPress.org

Ready to get started?Download WordPress

Forums

WP Video Lightbox
[resolved] Centering Thumbnail in Side Widget (11 posts)

  1. ricmil65
    Member
    Posted 1 month ago #

    I am really enjoying the plugin and it works great. I have one little wrinkle I cannot seem to fix. I have placed the short code in a side widget, with an auto thumbnail. Everything works fine EXCEPT, I cannot seem to center the thumbnail in the widget. It justifies to the left. I have tried using a text widget and a visual editor in the sidebar, and the short code reacts the same in both. Everything is functioning great, I just want to center the thumbnail to line up with the rest of the items above and below it on the page.
    Here is a link to the site in case that helps:

    http://designerlinenemporium.com/

    Thanks for a great plugin.

    https://wordpress.org/plugins/wp-video-lightbox/

  2. mbrsolution
    Member
    Posted 1 month ago #

    Hi ricmil65, try the following...

    .wpvl_auto_thumb_box {
        height: 150px;
        padding: 0 50px;<<== this is what I added
        width: 98%;
    }

    Kind regards

  3. ricmil65
    Member
    Posted 1 month ago #

    Thanks you very much. I added the code to my custom CSS and after adjusting the padding a bit I got it to work out. Only issue I have is that when the home page re-sizes (responsive theme) the thumbnail does not maintain a centred position. In the full screen desktop, it looks fine.
    Appreciate any further suggestions, at least I am further ahead from where I started!
    Many thanks.

  4. ricmil65
    Member
    Posted 1 month ago #

    Also found that for whatever reason, the thumbnail image moves, but the red arrow overlay stays justified left instead of centring along with the image.

  5. mbrsolution
    Member
    Posted 1 month ago #

    Hi try changing the width to 98%

    Regards

  6. ricmil65
    Member
    Posted 1 month ago #

    width is already set at 98% per your original post.
    thanks.

  7. mbrsolution
    Member
    Posted 1 month ago #

    For the arrow try the following

    .wpvl_auto_thumb_play {
        left: 100px;
        position: absolute;
        top: 50px;
    }

    Remember that if you have problems from a responsive point of view, change the px to percentage and adjust the number to suit your needs.

    Kind regards

  8. ricmil65
    Member
    Posted 1 month ago #

    thanks, that works in the desktop mode, but still no go on responsive.
    Not really sure about your comment about changing px to %.
    If I just want both the the arrow and the thumbnail to always be centred regardless of the screen size, I'm not sure how I would express that as a % or what the code would be .
    Thanks for all your assistance so far.

  9. mbrsolution
    Member
    Posted 1 month ago #

    It is my pleasure to help you. Responsive works with percentage rather than px. Another words if you set something to 100px in width then no matter the screen size it will always be 100px. Now setting it to that number will not work well in a small mobile device.

    So in the code above left is set to 100px, if you change it to lets say 30% will it still look good on a desktop? If it does then you know that setting it to 30% will always appear at 30% of what ever the widget is in a mobile device. Of course you also have to take into consideration checking for margins, borders etc so it will help you understand better how everything works.

    Kind regards

  10. ricmil65
    Member
    Posted 1 month ago #

    This is the custom CSS I am using, and the closest thing I can come to making it work>>>>

    .wpvl_auto_thumb_box {
       height: 150px;
       padding: 0 0px;
       width: 98%;
    text-align: center;
    }
      .wpvl_auto_thumb_play {
        left: 100x;
        position: absolute;
        top: 50px;
    }

    Still having issues with the resizing and centring when the screen size shifts down to mobile.
    Have tried every combination I can think of to express things in % instead of px, but that doesn't seem to work either.

  11. mbrsolution
    Member
    Posted 1 month ago #

    Hi try making changes in the following....

    .video_lightbox_auto_anchor_image {
        height: 150px;
        width: 200px;<<==make changes here
    }

    Your image is set to a width of 200px that is probably what is pushing your image to be more aligned to the right and not set in the middle.

    Regards

Reply

You must log in to post.

About this Plugin

About this Topic