Modals and Dropdowns Overflowing on Mobile

[tomr96]

Hi there,

I am using Content Area Modals and Dropdowns and both on Mobile devices are having an issue whereby they are going off the screen.

You can see here how the modal opens and doesn’t stay on the page.

This is my Modal setup in this example:

It seems to be something to do with the gap on each side of the Modal which is there on all device breakpoints, and therefore causing this issue on the mobile breakpoint it seems.

Thanks, Tom.

[ruenel]

Hello Tom,

Thanks for writing in! Please change the Close Size, it will change the outcome of the content modal. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

[tomr96]

Thanks,

Above is the example for the Modal.

This is the example of the Dropdown.

As you can see the text and video just goes off the screen on mobile and doesn’t flex to the width like normal content does.

This is sort of the same for the Modal mentioned previously - with that just going off the screen also.

Updated Secure Note for you.

Thanks, Tom.

[ruenel]

Hello Tom,

Your Modal Content width is 450px and it is already wider than the small screen. To prevent this from happening, you need to insert an inline element CSS that sets a maximum width of the modal content dropdown:

$el .x-dropdown {
  max-width: 85vw;
}

In the Content Area Dropdown > Customize > Inline CSS:

I have made an example to the very first content area dropdown element. Kindly check it now.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break.

Regards.

[tomr96]

Thanks! This has sorted the issue for me.

To save going around the whole site for both these issues I have done the below.

Solve the modal going off page with Page CSS:

.x-modal .x-modal-content { max-width: 85vw !important; }

Solve the dropdown going off page with Page CSS:

.x-dropdown { max-width: 85vw; }

Thanks for the help!

Tom.

[ruenel]

You’re welcome Tom! We’re just glad we were able to help you out.