gracias por investigar mi problema
Estoy creando un sitio web: http://testgod0312.000webhostapp.com/ , todos los css están separados por bloques para que sea más fácil ayudarme (en la carpeta de activos).
cuando vas al mapa y haces clic en un botón, aparece una ventana emergente, pero puedes seguir desplazándote. El botón solo está codificado en css (no js), todo en el archivo map.css: ¿alguna idea de cómo deshabilitar el desbordamiento sin recurrir a js? si usa js, ¿qué haría ya que no hay una función que capture la apertura/cierre de la caja?
Tengo un menú (haga clic en la esquina superior derecha), funciona bien en la computadora portátil, pero en el móvil, solo muestra el 50 %. El código está en nav.css; con el responsive en la parte inferior. ¿Alguna idea de cómo mostrarlo todo?
¡¡gracias de antemano!! fafa
# 1 no se puede resolver sin javascript siempre que los navegadores no admitan css:has() . Entonces, la única forma es aplicar una clase o un style="overflow: none;" al cuerpo tan pronto como se abra una ventana emergente y elimínela después de cerrarla. Lo mismo sucede ya si el menú está abierto/cerrado.
Un fragmento de código muy pequeño sería suficiente:
window.addEventListener("hashchange", () => document.body.classList.toggle("popup-open", location.hash.startsWith('#popup')) );y CSS
body.popup-open { overflow: none; } Acerca del #2 dentro de nav.css, los valores aplicados antes de la consulta de medios ( @media all and (max-width: 767px) { ) causan el problema.
El menu__right cambia de flex a none en pantallas pequeñas. Y menu__left todavía tiene el valor correcto del 50% aplicado para pantallas más grandes, por lo que ajustar este valor dentro de la consulta de medios al 0% lo resuelve.
.menu__left { right: 0%; width: 100%; }