Trying to get columns to resize properly on different screen sizes

[jeffmorris1993]

Hi all,

I am having trouble understanding why my layout doesn't resize properly if the screen is too small. The first pic is the right way it should look when the screen is big enough and the second picture is what happens when the screen is too small (I've tested this by just dragging the inspect screen to make my screen size smaller). I am very new to CSS, so I'm not sure what I messed up in the code to not enable this functionality.

The code is below:

import React, {Component} from 'react';
import Rectangle from 'react-rectangle';
import {Container, Row, Col} from 'react-grid-system';

class FloorPlanLayout extends Component {
    render() {
        const groupings = [[['AA', 'AA', 'AA', 'AA'], ['BB', 'BB', 'BB', 'BB'], ['CC', 'CC', 'CC', 'CC'], ['DD', 'DD', 'DD', 'DD'], ['EE', 'EE', 'EE', 'EE']], 
                            [['JM', 'JM', 'JM', 'JM']]]
        var test = 0
        return(
            <>
                <div style={{width: '100%', height: '50%',  margin: '0 auto', borderStyle: 'solid' }} >
                    <Container fluid="sm">
                        {
                            groupings.map((topGroup, topGroupIndex) => {
                                var marginHeight = 25*(topGroupIndex) + 25
                                var calculatedOffset = 6 - (topGroup.length - 1 % 5)
                                /*console.log("Calculated Offset: ", calculatedOffset)
                                console.log("Length: ", topGroup.length);
                                console.log("Num times: ", test)*/
                                test++;
                                return(
                                    <div style={{position: 'relative', margin: `${marginHeight}px 0px`}}>
                                        <Row>
                                            {topGroup.map((group, groupIndex) => {
                                                console.log("Group: ", group)
                                                console.log("Group index: ", groupIndex)
                                                return(<Col debug sm={2} offset={{sm: groupIndex === 0 ? calculatedOffset : 0}} pull={{sm: 1}}>
                                                    <Row>
                                                        {group.length > 1 && 
                                                            <Col debug sm={0.5} offset={{sm: 3}}>
                                                                <Rectangle style={{background: 'blue', width: '35px', height: '35px', margin: '0px 0px'}}>
                                                                    <h5 style={{textAlign: 'center'}}>{`${group[1]}`}</h5>
                                                                </Rectangle>
                                                            </Col>
                                                        }
                                                    </Row>
                                                </Col>)
                                            })}
                                        </Row>
                                        <Row>
                                            {topGroup.map((group, groupIndex) => {
                                                return(<Col debug sm={2} offset={{sm: groupIndex === 0 ? calculatedOffset : 0}} pull={{sm: 1}}>
                                                    <Row>
                                                        <Col debug sm={0.5}>
                                                            <Rectangle style={{background: 'blue', width: '35px', height: '35px', margin: '10px 0px'}}>
                                                                <h5 style={{textAlign: 'center'}}>{`${group[0]}`}</h5>
                                                            </Rectangle>
                                                        </Col>
                                                        <Col debug sm={0.5} offset={{ sm: 1}}>
                                                            <Rectangle style={{background: 'black', width: '50px', height: '50px', margin: '5px -7px'}}>
                                                                <h3 style={{textAlign: 'center', color: 'white', margin: '5px 0px'}}>{`${groupIndex + 1}`}</h3>
                                                            </Rectangle>
                                                        </Col>
                                                        {group.length > 1 && 
                                                            <Col debug sm={0.5} offset={{sm: 1}}>
                                                                <Rectangle style={{background: 'blue', width: '35px', height: '35px', margin: '10px 0px'}}>
                                                                    <h5 style={{textAlign: 'center'}}>{`${group[1]}`}</h5>
                                                                </Rectangle>
                                                            </Col>
                                                        }
                                                    </Row>
                                                </Col>)
                                            })}
                                        </Row>
                                        <Row>
                                            {topGroup.map((group, groupIndex) => {
                                                return(<Col debug sm={2} offset={{sm: groupIndex === 0 ? calculatedOffset : 0}} pull={{sm: 1}}>
                                                    <Row>
                                                        {group.length > 1 && 
                                                            <Col debug sm={0.5} offset={{sm: 3}}>
                                                                <Rectangle style={{background: 'blue', width: '35px', height: '35px', margin: '0px 0px'}}>
                                                                    <h5 style={{textAlign: 'center'}}>{`${group[1]}`}</h5>
                                                                </Rectangle>
                                                            </Col>
                                                        }
                                                    </Row>
                                                </Col>)
                                            })}
                                        </Row>
                                    </div>
                                )
                            })
                        }
                    </Container>
                </div>
            </>
        )
    }
};

export default FloorPlanLayout;

Any help on this is greatly appreciated! Thank you!