Making mobile overlay screens look like large screen size overlays

Ask for Help
1

I really like the way overlays work and function when using a large screen size, but the mobile overlay taking up the entire screen makes me use slide-in for nearly everything.

But slide in is unnecessarily large on the PC while working great on mobile.I know i could have conditional workflows based on screen size but the amount of screens and workflows for that would be so immense.

I would rather write a custom CSS to adjust the overlay. LLMs have written me the code, but i believe it is not working as we don’t know how to deal with class name of an overlay.

Chat GPT gave me .glide-overlay but it also outright stated that it was a guess, and that info is not publicly available so likely wrong.

/* Make overlay modals float and stay small on mobile too */

.glide-overlay {
max-width: 500px !important;
max-height: 90vh !important;
margin: auto !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
backdrop-filter: blur(8px) !important;
background: rgba(255, 255, 255, 0.9) !important;
}

/* Prevent overlay from expanding to full width on small screens */
@media (max-width: 767px) {
.glide-overlay {
width: 90% !important;
height: auto !important;
}
}

Any suggestions? I don’t know code but this is the code it gave me. Is it at all accurate?

2

You can’t set a custom CSS component name for an overlay, only the components it contains. The only way to do this would be to inspect the overlay and use the generated class names, however they seem to have dynamic characters in them and thus are likely to change and break your customizations.

I would advise that Glide has taken these design considerations into account and have provided appropriate components for mobile interfaces, so you might want to use the standard display settings here to avoid customizations that will break.

2 Likes