Different popup size depending on screen size

  • Resolved tnn

    (@noelforge)


    2 years, 2 months ago

    Hi there.

    I created a popup that is supposed to take 40% of the screen on large devices.
    It works, but it looks way too small on small and medium devices.

    I need the popup to take 90% of the screen on medium and small devices.

    Is that something that can be achieved without having to create multiple popups for each screen size ?

    Maybe with css ?

    Thanks. great plugin by the way

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Kim L

    (@kimmyx)

    Hi @noelforge,

    I’m sorry to hear about your popup size issue.

    Do you have a link for us to check?

    By default, the popup container adjusts accordingly when viewed on a mobile device.

    You can set the Max Width to 90% in ‘Display – Size’ option settings. Please see: https://share.getcloudapp.com/eDu7B5RN

    Let us know how it goes.

    Thank you for using Popup Maker!

    Thread Starter tnn

    (@noelforge)

    Actually, I’m not using the plugin to create popups, but as a Menu builder on a local test website. It is very convenient because it lets you insert elements from Page Builders, within a popup/”menu”.

    Obviously I have to use a fixed width and height ; a menu shouldn’t adjust itself, like a popup would.

    I’m applying the CSS class to my Button to trigger the opening of the menu, like this :

    View post on imgur.com

    As a menu, the Height has to be set to 100% in all cases, but the width should be set a 90% on mobile, and maybe just 50% on desktop.

    I think this could be achieved through some css / viewport function, but I’m a bit confused by your css classses

    A bad idea would be to create duplicate buttons calling duplicate popups with different sizes, that would display on mobile or desktop respectively.

    Anyway, any suggestion would help ! thanks a lot

    Thread Starter tnn

    (@noelforge)

    All right. So I found the solution :

    #popmake should be changed to ID of your popup

    In this example, the popup will reduce to 10% in width when the screen is under 992px width ( which is the viewport for medium screens, ipads and whatever ) , but if the screen is larger, it will keep the properties that you first gave it within the plugin. 

    @media only screen and (max-width: 992px) 
{
#popmake-14789
{  width: 10%!important;
} 
}

    thanks !

    • This reply was modified 2 years, 2 months ago by tnn.
    • This reply was modified 2 years, 2 months ago by tnn.
    • This reply was modified 2 years, 2 months ago by tnn.
    • This reply was modified 2 years, 2 months ago by tnn.
    Plugin Support Kim L

    (@kimmyx)

    Hi @noelforge,

    Thank you for the update.

    We’re glad that’s all sorted out!

    I’ll go ahead and mark this as resolved. Feel free to create a new thread if you have other questions.

    Cheers!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Different popup size depending on screen size’ is closed to new replies.