Estoy usando ReactJs para aprender a construir un sitio.
<div> <div className = "Home"> <div className = "wrapper"> <div className= "one" > <img src={image} alt="clock" height = '590px' width='590px'></img> </div> <div className="two"> <center> <p>Perfect tool to get your </p> <p> service on <mark className = 'ser'>Word</mark></p> </center> <div className = 'btn_see'> <a href="/" class="button">Explore</a> </div> </div> </div>este es el código en la página js y aquí está el código css para div:
.wrapper { border : 2px solid #000; overflow:hidden; } .wrapper div { min-height: 200px; padding: 10px; } .one { float:left; margin-right:20px; width:50%; border-right:2px solid #000; } .two { overflow:hidden; margin:10px; border:2px dashed #ccc; min-height:170px; } /*mobile*/ @media screen and (max-width: 800px) { #one { float: none; margin-right:0; width:auto; border:0; } }mientras que en el escritorio, funciona según lo previsto, pero en el móvil, debería ir uno debajo del otro, lo que no sucede, sino que se apila uno sobre el otro, hay algún problema con mi código.
Cómo debería y se ve en el escritorio lado a lado div
Cómo debería verse en el móvil pero no lo es
hay algo mal con mi código, por favor ayuda soy nuevo.
Hay diferentes enfoques para que esto suceda.
1. Flex Box System 2. Grid SystemPista: puedes hacerlo con flex box y cuando se convierta en su versión móvil, todos los bloques deben estar en dirección horizontal.
No veo ningún elemento con ID one en su html, así que asumo que desea seleccionar el nombre de la clase, en cuyo caso su selector en la consulta de medios debe ser .one como escribió anteriormente y no #one . # se utiliza para seleccionar ID . se utiliza para seleccionar clases.
Puede usar Grid o Flex. Ambas son formas de hacer un diseño receptivo y con muchas características que facilitarán esta tarea. A continuación se muestra un fragmento de cómo puede hacer que se apile en dispositivos móviles usando flex. Además, aquí hay algunas referencias tanto en grid como en felxbox. Utilice el que le parezca más adecuado a sus necesidades:
Cuadrícula: cuadrícula
Flexbox: Conceptos básicos de flexbox
#wrapper{ display: flex; flex-direction: row; } #one { background-color: #808080; } #two { background-color: blue; } #wrapper div{ min-height: 200px; padding: 10px; } @media screen and (max-width: 800px) { #wrapper { flex-direction: column; } } <div id="wrapper"> <div id="one"> I'm the first </div> <div id="two"> I'm the second </div> </div>