Okay
  Public Ticket #2368531
Center video Lightbox
Closed

Comments

  •  2
    Kecco started the conversation
    April 19, 2020 at 7:30pm

    Hi,

    I have a video Lightbox with text that I cannot center properly.

    I selected Centered Content Alignment in the column setting, I set up a border and you can see from the attachment that it's not quite centered.

    Looks like it is happening only on mobile.

    Thank you

  •  8,886
    Tahir replied
    April 20, 2020 at 11:57am

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    .nectar_video_lightbox.play_button_with_text .link-text {
    margin-left: 0px !important;
}

    Thanks

    ThemeNectar Support Team 

  •  2
    Kecco replied
    April 20, 2020 at 9:38pm

    Hey Tahir, thanks.

    This worked but now on the desktop version the textbox and the play button have no margin between them and look ugly. I attach a screenshot for your reference.

    I also have this same alignment problem on mobile with embedded google forms, you can see it here www.essentialpower.cl/kit-personalizado. It is centered on desktop, not on mobile.

    Cheers

  •  8,886
    Tahir replied
    April 21, 2020 at 9:24pm

    Hey Again,

    Use this instead of the css earlier provided so it only removes the left margin on screens less than 1000px :

    @media only screen and (max-width: 999px) and (min-width: 1px) {
    .nectar_video_lightbox.play_button_with_text .link-text {
        margin-left: 0px !important;
    }
}

    Thanks 

    ThemeNectar Support Team 

  •  2
    Kecco replied
    April 21, 2020 at 10:24pm

    Awesome, that worked.

    Anything we can do with the form I mentioned earlier?

    Cheers 

  •  8,886
    Tahir replied
    April 22, 2020 at 10:27am

    I see you got it working using the Centered Column Option in here : http://prntscr.com/s3vwal . 

    Thanks

    ThemeNectar Support Team 

  •  2
    Kecco replied
    April 22, 2020 at 10:48pm

    It doesn't show centered on my iPhone!! It does on desktop version, but on mobile still doesn't look the best!

    See screenshot.

    Cheers


  •  8,886
    Tahir replied
    April 23, 2020 at 6:39pm

    Hey Again,

    Unfortunately there is no method to align any content inside an Iframe. Also in Chrome mobile emulation i am seeing a scroll bar on the right which might be causing this .

    Thanks 

    ThemeNectar Support Team 

  •  2
    Kecco replied
    April 24, 2020 at 11:49pm

    Thanks. In Chrome emulation I see the scroll bar, which doesn't appear on my iPhone. I resized the container of the form so it's longer and the scroll bar disappeared from the chrome emulation too. However, Safari in my iPhone still shows the form aligned right. 

    Do I have to live with it?

    I appreciate your time


  •  2
    Kecco replied
    April 24, 2020 at 11:52pm

    I downloaded Chrome on my iPhone and the form is centered. So it's Safari.

    Thanks