Website Popup in Outsystems 10 Doesn't adjust accordingly for Mobile.

I have implemented a working popup on my website.
But on mobile the popup doesn't scale responsively, it
goes outside the screen borders. This is by default
I have not not added some sort of custom styling
to the popup. 

Out of the box this item is not responsive... Why?
And is it going to be fixed or do I need to hack
something together to fix this?

Hey,

How are you building your popup? By default, the popups created with the Popup_Editor widget aren't supported by mobile. What this means is that they'll work, but they aren't guaranteed to be responsive:

Depending on your popup, you can still style them to be. We just finished implementing a popup in my current project and since it didn't have a lot of content, all that was needed was to remove a min-width property being set by the Theme.

Could you share a bit more about what you're displaying in the popup?

Afonso Carvalho wrote:

Hey,

How are you building your popup? By default, the popups created with the Popup_Editor widget aren't supported by mobile. What this means is that they'll work, but they aren't guaranteed to be responsive:

Depending on your popup, you can still style them to be. We just finished implementing a popup in my current project and since it didn't have a lot of content, all that was needed was to remove a min-width property being set by the Theme.

Could you share a bit more about what you're displaying in the popup?

Thank you. It probably is the min width. I will check it out. 

Solution

This is the final code I used to fix this problem.

SyntaxEditor Code Snippet

/* Popup Responsive fix so popup scales correctly on Mobile Devices */
.Page.phone .MainPopup {
    min-width: max-content;
}

This is a very easy fix. I hope the OutSystems Team will implement this their future updates. 

Side Note: Min width should always be no less than max-content.
And max-width  should always be 100%,

Because if anything is less than max-content you are cutting off content.
And if anything is more than 100% you are also cutting off content.
Therefore you are taking the wrong approach and need to re-arrange your layout.

If you need to go over the border limits of your screen size you should be
implementing scrolls and sliders or animated content to keep you system responsive.

Solution

Nice! Thank you for posting the CSS, I wasn't sure of the exact selector. This will be of great help for anyone else in need.