Centering Thumbnail in Side Widget

Hi ricmil65, try the following…

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

Kind regards

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.

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.

Hi try changing the width to 98%

Regards

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

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

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.

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

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.

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