'React - UI not aligning on mobile

I am having a layout which has text and a button on the left side and the image on the right side. The layout is working fine on the desktop but when i switch to the mobile view the ui breaks. On the mobile only the image is showing up. The text and the button is not there.I am using flex for the UI.

    <div className='container-1'>
     <div className='container-2'>
    <div>
      <h1>heading</h1>
      <p>
      Loren Ipsum
      </p>
     
        <Button>button</Button>
      
      <p>
      lorem ipsum
      </p>
    </div>
    <div>
      <img
        src={homepage}
        width="300"
        height="300"
        alt='home'
       
      />
    </div>
  </div>
</div>

My Css File

.container-1 {
position: relative;
background-image: linear-gradient(180deg, #0000FF 0%, #0000FF 70%);
min-height: 100%;
width: 100%;
}

.container-2 {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 10%;
}
reactjsuser-interfaceflexboxpine-script


Solution 1:[1]

You can use strategy.closedtrades.exit_bar_index() and compare it to bar_index. If they are equal then an exit occurred on the current bar. If bar_index is higher by one then an exit occurred last bar etc.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bjorgum

Related Questions