Content Area Modal in Mobile View

Support
#1

Is there an (easy) way to make a content area modal fullscreen below a certain breaking point? Or at least reduce the margins.

#2

Hi There,

Thanks for writing in!

Please setup the modal like the screenshot.

Then add this css to your theme option-> Global css

@media  (max-width: 768px) {
.x-modal-content-inner {
   padding : calc(.5em*2) !important;
}
}

You can adjust the value for your target screen size.

Hope this is something you are looking for.

1 Like
#3

Works like a charm.

Just one followup: Is there a way to place the x-modal-close inside the x-modal-content? Cause that’s the place I would be looking for it.

#4

Hi,

To move it inside the modal, you can add this in Theme Options > JS

jQuery(function($) {
    $( ".x-modal-close" ).prependTo( ".x-modal-content" );
});

Then add this in Theme Options > CSS

.x-modal-close {
   color:#000;
}

Hope that helps.

2 Likes
#5

Perfect, thanks

#6

You’re more than welcome, glad we could help.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.