I am using ReactJs to learn to build a site
<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>
this is the code on js page and here is css code for 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;
}
}
while on desktop, it works as intended but on mobile, it should go one below the another which it does not instead it stacks on one another is something wrong with my code.
How it should and is looking on desktop side by side div
How it should look on mobile but isn't
is something wrong with my code, please help I am new.
There are different approaches to make this happen.
1. Flex Box System
2. Grid System
Hint: You can do it with flex box and when it turns into its mobile version, all of the blocks must be in a horizontal direction.
I'm not seeing any element with ID one in your html, so i'm assuming you want to select the class name, in which case your selector in the media query should be .one as you've written above and not #one. # is used to select IDs . is used to select classes.
You can use either Grid or Flex. They are both ways to make a layout responsive and with a lot of features that will make this task easy. Below is a snippet on how you could make it stack on mobile using flex. Also, here's some references on both grid and felxbox. Use whichever seems more fitting to your needs:
Grid: grid
Flexbox: Basic concepts of 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>