Cómo detener el cruce de elementos cuando cambio el tamaño del navegador en HTML / CSS

Eso siempre sucederá a menos que comience a usar el sistema de cuadrícula bootstrap, lo ayudará mucho con los elementos de posicionamiento sin preocuparse por su comportamiento en otros dispositivos, como teléfonos móviles o tabletas, como si elige lo que desea que todo se vea extra- pantallas pequeñas, pequeñas, medianas o grandes

Este sistema de cuadrícula lo ayudará a organizar la pantalla de esta manera:

entonces desea enfrentar su problema nuevamente ya que funciona como un conjunto dinámico de columnas y filas.

puede sangrar este enlace de bootstrap alojado desde CDN (entrega de red de contenido) bajo el enlace css en su archivo html para comenzar a trabajar con bootstrap:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot ; integridad =” sha384-1q8mTJOASx8j1Au + a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7 “crossorigin =” anónimo “>

Nota:

bootstrap es un marco css que te ayuda a no reconstruir la rueda y te hace comenzar desde lo que otros terminan, te ayudará en imágenes, botones, barras de navegación … etc.

hay un enlace para bootstrap si está interesado en saber más:

CSS · Bootstrap

Puede usar marcos receptivos, que hacen el trabajo por usted, algunos ejemplos,

• Bootstrap · El marco front-end más popular del mundo para dispositivos móviles y receptivo.
• Placa de respuesta CSS receptiva

O utilice una función HTML5 incorporada llamada consultas de medios.

Las consultas de medios le permiten cambiar las propiedades CSS de sus elementos de acuerdo con el tamaño de la ventana del navegador.

Más sobre cómo usarlos aquí,

• Consultas de medios para dispositivos estándar | CSS-Tricks
• Usar consultas de medios

¡Aclamaciones!

Si bien Bootstrap podría ayudarlo, si su sitio aún no está en bootstrap, no me apresuraría a ponerlo en este problema.

Parece que necesita una consulta de medios en su CSS justo en la resolución donde comienza a ver esta superposición. Una vez que alcance esta resolución, deberá hacer algo para solucionar este problema. La solución puede ser una serie de cosas, como poner el logotipo en una “línea” estableciendo el ancho del logotipo al 100% (o el contenedor del logotipo al 100% y centrando el logotipo real) y luego comenzar la prueba en un línea separada.

Es posible que también deba hacer otras cosas, como eliminar elementos que realmente no necesita en esta resolución más pequeña (como presentaciones de diapositivas, etc.).

Si fuera yo, me quedaría con su CSS actual (no vaya a bootstrap, a menos que ya lo esté usando). Dijiste que estás aprendiendo un diseño de sitio web receptivo, y la mejor manera de aprenderlo es adentrarte en estas situaciones y encontrar la salida usando CSS puro. Bootstrap es increíble, pero hace muchas cosas por ti, eliminando parte del proceso de aprendizaje.

Buena suerte

Para deshacerse de los problemas de visualización en los navegadores, use conceptos avanzados en diseño web como diseño web receptivo

El diseño web receptivo hace que su página web se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos).

Responsive Web Design se trata de usar CSS y HTML para cambiar el tamaño, ocultar, reducir, ampliar o mover el contenido para que se vea bien en cualquier pantalla:

Puede usar bootstrap, que es una manera más fácil

o

puedes usar la metaetiqueta

que debes usar en todos tus sitios web.

Junto con él, use css correctamente (posicionamiento relativo, consultas de medios y alineación) que conoce. Para obtener más información, siga este enlace de w3schools Responsive Web Design Introducción

Coloque dentro de su archivo CSS principal el siguiente código:

su pantalla de medios necesaria

@media screen y (max-device-width: DEVICEWIDTH)
{

#tu identificación

{
flotador: ninguno;
ancho: auto;
margen: 0 automático;
…
}

o:

Use métodos CSS flexbox para navegadores reales.

Puede usar el marco de diseño de arranque como para crear un sitio receptivo. O puede aprender sobre la consulta de medios.
Al usar la consulta de medios en CSS, podemos hacer que nuestro sitio web responda …

Lo único que necesita aprender es Bootstrap: http://getbootstrap.com
Toneladas de videos gratuitos y sesiones de capacitación en línea. Puede crear un sitio web 100% receptivo.