Lightbox responsiveness in mobile view

  • Resolved tobbecokta

    (@tobbecokta)


    5 years, 4 months ago

    Hi,

    I am using the lightbox with inline content. It looks great when opening the lightbox on a computer. But on mobile phones the width is too less, making the box very narrow and long.

    Is there a way to make the lightbox responsive in mobile? So that it has “standard” width on computer view and full width on mobile view?

    Br,
    Tobias

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Vova

    (@gn_themes)

    Hi Tobias,

    1. Set the width of the lightbox content to 100%:

    [su_lightbox type="inline" src="#my-custom-popup"] Click here to open lightbox with HTML content [/su_lightbox]

[su_lightbox_content id="my-custom-popup" width="100%"]

<h3>Custom HTML content</h3>

Any <strong>HTML</strong> <em>tags</em> can be used here. Other shortcodes are also [su_highlight]allowed[/su_highlight].

[/su_lightbox_content]

    2. Add the following CSS code to the Custom CSS code field at the plugin settings page:

    .su-lightbox-content {
	max-width: 600px;
}
    Thread Starter tobbecokta

    (@tobbecokta)

    Hi,

    Thanks for your reply, it solves the issue!

    • This reply was modified 5 years, 4 months ago by tobbecokta.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Lightbox responsiveness in mobile view’ is closed to new replies.