How to make a popup fullscreen?

[harshala]

Hi guys!

I am trying to make the popup I have (which is used to create a post) - fullscreen. Does anyone know how to go about this?

Right now it looks like this:

[manikandan]

Fullscreen popup

Hi @myth, Just add css to the popup screen like below, div.fullwidthpopup { width: 100% !important; height: 100% !important; position: fixed !important; top: 0 !important; left: 0 !important; margin-left: 0 !important; } div.fullwidthpopup .bubble-r-box , div.fullwidthpopup .RepeatingGroup, div.fullwidthpopup .HTML{ width: 100% !important; height: 100% !important; }

[harshala]

hey,

so I added it using html element, and it didn’t work. This is how I added it. When I preview it shows the same size.

[grace.hallak]

he needs to install Classify plugin and add an ID attribute to the popup, right?

[manikandan]

Hi,
Enable “Expose the option to add an ID attribute to HTML elements” from the Settings tab → General.
After that, add a value to the “ID Attribute” input box like below

and then, add new HTML element and append the style tag with <style>div#YOUR_ID_ATTRIBUTE{width: 100% !important; height: 100% !important; position: fixed !important; top: 0 !important; left: 0 !important; margin-left: 0 !important; } div.fullwidthpopup .bubble-r-box , div.fullwidthpopup .RepeatingGroup, div.fullwidthpopup .HTML{ width: 100% !important; height: 100% !important;}</style>

[harshala]

this worked! Thank you so much

[harshala]

I had one more doubt.

So it works great on desktop and tablet mode - but in mobile mode it is hiding my ‘publish button’. So it looks perfect above 400 px, but the moment it’s less than 400 px it’s hiding the buttons - and is not scrollable too.

Here’s the difference:

Anyway how I can go around this?