Reactstrap layout issue

Question

I'm new to reactstrap and I have some issues with the layout.

I would like to design a connection container like following example.

enter image description here

When I resize my screen for smaller screens, the text is layered over the image. And it's not aligned properly. enter image description hereenter image description here

The code I have for this layout is:

render() {
        return (
            <React.Fragment>
                <div className="page-content">
                    <Container fluid>
                                <Card>
                                    <CardBody>
                                        <AvForm className="form-horizontal" onValidSubmit={(e, v) => {
                                            this.handleValidSubmit(e, v)
                                        }}>
                                            <Row>
                                                <Col sm="3"><img src={mollieImage} style={{
                                                    width: '300px',
                                                    height: "auto",
                                                    boxShadow: "3px 3px 2px rgba(46, 46, 46, 0.62)"
                                                }}/></Col>
                                                <Col sm="9">
                                                    <Row><h5>Connection Status</h5></Row>
                                                    <Row><p>Allow access to your customers, payments, organization, profiles and onboarding.</p></Row>
                                                    <Row>
                                                        {this.props.isConnected ? <Button type="submit" color="danger">Disconnect</Button> :
                                                            <Button type="submit" color="success">Connect</Button>}
                                                    </Row>
                                                </Col>
                                            </Row>
                                        </AvForm>
                                    </CardBody>
                                </Card>
                    </Container>
                </div>
            </React.Fragment>
        )
    };

Answer 1

For your image to be responsive, I'd refactor the 300px value to be maxWidth instead of width. As for its width you can have it be responsive to its container by assigning 100% to it.

<Col sm="3"><img src={mollieImage} style={{
  maxWidth: "300px",
  height: "auto",
  boxShadow: "3px 3px 2px rgba(46, 46, 46, 0.62)",
  width: "100%"
}} /></Col>

With regards to the smaller screens view, the prop sm on your Col components will only kick in if the screen size is greater than or equal to 576px. See the sample col-sm- definition on the Bootstrap stylesheet

@media (min-width: 576px)
.col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

So when the client's screen size if less than 576px, that is when the sm prop will start to lose effect thus your layout changes drastically. For that, your going to have to come up with solutions such as using xs prop or CSS media queries