CODEWITHSUNDEEP
javascripthtmlcssreactjs
Ro Yoru
Ro Yoru

Reputation: 23

Creating a side by side div and responsive top bottom div in reactjs

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

top bottom div in responsive

is something wrong with my code, please help I am new.

Upvotes: 2

Views: 494

Answers (3)

Pelicer
Pelicer

Reputation: 1584

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>

Upvotes: 1

Rod911
Rod911

Reputation: 860

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.

Upvotes: 1

Erfan Motallebi
Erfan Motallebi

Reputation: 178

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.

Upvotes: 1

Related Questions