How to set width for content modal on mobile viewport?

[nolasmiles]

Hello!

Please see the attached screenshot of our website on my phone. The width of our content modal is perfect for all viewports except 480px and smaller. As you can see, we need to adjust the modal’s width to be more user-friendly on smaller mobile devices.

Is there a way to adjust the width specifically for that viewport?

Thanks for your time, and looking forward to your response!

[Prasant]

Hello @nolasmiles,

Thanks for asking.

Your website nolasmiles.com is redirecting to google.com. Can you please confirm? If you could share the exact URL and fix the redirect we could give you the code to fix the width.

Thanks.

[nolasmiles]

You can check again - shouldn’t be any issues accessing the site now.

[friech]

Hi There,

We need to remove the side paddings of modal-content so we can utilize that area. Please inspect the Content Area Modal element, under the Customize tab add the CSS code below on the Element CSS area

@media (max-width: 480px) {
	$el .x-modal-content {
    max-width: 100% !important;
    margin-left: -1.5em;
    padding-left: 0 !important;
    padding-right: 0 !important;
	}
}

Feature - Element CSS

Hope it helps,
Cheers!

[nolasmiles]

Thanks for the code!

Unfortunately, all it adjusted was the padding in the modal but not the margins on either side of the modal. For whatever reason, I just can’t figure out how to reduce the margins on either side of the modal for the below 480px viewport…

Appreciate the help, we’ll hopefully get this sorted out soon.

[ruenel]

Hello There,

You can update it to this code:

@media (max-width: 480px) {
  $el .x-modal-content {
    max-width: 100% !important;
    margin-left: 1em;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

Feel free to play around with the margin and paddings by reducing or increasing the number.

[nolasmiles]

Thanks for the reply!

Unfortunately, the provided code still didn’t decrease the space on either side of the modal for that viewport.

The size/position of the modal is perfect for all viewports aside from 480px and below. From what I can tell, this issue seems to be related to the size/position of the modal’s close button. I have the “X” set to be fairly large so visitors can easily see/use the button, but that reduces the margins on either side of the modal accordingly…

To clarify, we want a large close button in tandem with small margins on both sides of the modal.

Hope that additional information helps, and I appreciate your efforts to help me troubleshoot this situation.

[rad]

Hi @nolasmiles,

Please change that CSS to this

@media (max-width: 480px) {
$el .x-modal-content-inner {
    padding: 1em;
}
}

If it’s not working, then please ignore that and place this CSS to your builder’s custom CSS instead

@media (max-width: 480px) {
.e2445-13.x-modal .x-modal-content-inner, .e2445-20.x-modal .x-modal-content-inner {
    padding: 1em !important;
}
}

Thanks!