How to reduce side-of-page padding for mobile

  • Resolved SpenceDesign

    (@spencedesign)


    12 years ago

    Any options to decrease the side-of-page padding?

    The light box videos appear too small to be useful on mobile devices due to the large amount of padding at the edge of the screen. The plugin auto sizes based on window size which is great, but the side of page padding it too much on smaller screen sizes. I have looked through the CSS, but have not been able to locate the correct place to make the edit.

    Any thoughts?

    -SDesign

    https://www.ads-software.com/extend/plugins/wp-video-lightbox/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Terve

    (@terve)

    I have the same issue I am considering to test if the Ultimate commercial version is helping.

    Nope, the Ultimate version did not help much.

    In fact, for mobile devices (screen sizes under a certain width) they should not do the pop-up at all, but instead have a “normal” link to youtube etc. At least for iPhone IOS6 the video never play in the po-up anyways it just starts in a new tab as it normally would do.

    Thread Starter SpenceDesign

    (@spencedesign)

    Hi Terve,

    Here is what I discovered. The padding issue etc. is based on the plugin’s JavaScript and thus without major tweaking I was not able to accomplish what I needed with this plugin.

    I decided to go back and explore another plugin which I already use that just about does what I need with a few tweaks. I went back to LightBox Plus and after enabling the Secondary Lightbox in Appearance/Lightbox Plus I was able to get links to pop up video that sizes and pads pretty well. You will need to tweak the secondary LightBox base settings a bit, but the results are very acceptable after making some adjustments. I can provide more detail if necessary.

    Here is what the syntax looks like to make a text link that pops up a video using LightBox Plus: <a class="lbpModal" href="https://www.youtube.com/embed/YourVideoIdHere?rel=0" width="640" height="360">Video Demonstration</a>

    If you are just looking for a plugin to resize videos as the screen sizes reduces for responsive mobile video viewing, FitVids for WordPress is a great option.

    I hope some of this information is helpful.

    -Spence Design

    Thanks Spence, I guess the FitVids cannot be used in combination with the Lighbox plugins? Any details on the tweeks you did would be much appreciated.

    Thread Starter SpenceDesign

    (@spencedesign)

    Hi Terve,

    I have no issue using FitVids (older version 1.0.1) and LightBox Plus (2.4.6) together.

    Here are a couple link to graphics to help with the proper settings of Lightbox Plus.

    Enable secondary light box in settings/lightbox plus:
    https://spencedesignhosting.com/images/lightbox-enable.png

    My current settings for getting video to pad better for mobile devices also set in settings/lightbox plus area:
    https://spencedesignhosting.com/images/lightbox-settings.png

    You can see how my pop-up video settings work on this site, specifically the “Video Demonstration” links for products 2,3,5 and 6:
    https://www.dslrsolutions.net/products/

    You can even reduce the window size to see how FitVids deals with the main video at the top of the linked page.

    I hope this helps.

    -Spence Design

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to reduce side-of-page padding for mobile’ is closed to new replies.