How do I fix the css of my code to make it less crowded when the browser is smaller?-CodePudding

I created an front end page for a bunch of modal buttons which look pretty well on my screen. But when I reduce the browser size or run the application on my laptop the buttons collide into each other.

This is how it looks normally (https://imgur.com/gallery/0603cMO) on my screen.

This is what it looks like when the browser size is reduced (https://imgur.com/gallery/KbDPsIG)

How I have laid it out is each row is its own container of buttons, and the three containers are on top of each other.

            <Container>
                <Button onClick={openAriModal}> <img src={ari} alt="ari" height='300' width='200' /> </Button>
                <Button onClick={openCasModal}> <img src={cas} alt="cas" height='300' width='200' /> </Button>
                <Button onClick={openCatModal}> <img src={cat} alt="cat" height='300' width='200' /> </Button>
                <Button onClick={openGraModal}> <img src={gra} alt="gra" height='300' width='200' /> </Button>
                <Button onClick={openHowModal}> <img src={how} alt="how" height='300' width='200' /> </Button>
                <Button onClick={openKagModal}> <img src={kag} alt="kag" height='300' width='200' /> </Button>
                <Button onClick={openKikModal}> <img src={kik} alt="gra" height='300' width='200' /> </Button>

                <AriModal showModal={showAriModal} setShowModal={setAriShowModal}/>
                <CasModal showModal={showCasModal} setShowModal={setCasShowModal}/>
                <CatModal showModal={showCatModal} setShowModal={setCatShowModal}/>
                <GraModal showModal={showGraModal} setShowModal={setGraShowModal}/>
                <HowModal showModal={showHowModal} setShowModal={setHowShowModal}/>
                <KagModal showModal={showKagModal} setShowModal={setKagShowModal}/>
                <KikModal showModal={showKikModal} setShowModal={setKikShowModal}/>
       
            </Container>

            <SecondContainer>
                <Button onClick={openMarModal}> <img src={mar} alt="mar" height='300' width='200' /> </Button>
                <Button onClick={openOnlModal}> <img src={onl} alt="onl" height='300' width='200' /> </Button>
                <Button onClick={openPomModal}> <img src={pom} alt="pom" height='300' width='200' /> </Button>
                <Button onClick={openPonModal}> <img src={pon} alt="pon" height='300' width='200' /> </Button>
                <Button onClick={openPopModal}> <img src={pop} alt="pop" height='300' width='200' /> </Button>
                <Button onClick={openPorModal}> <img src={por} alt="por" height='300' width='200' /> </Button>
                <Button onClick={openPriModal}> <img src={pri} alt="pri" height='300' width='200' /> </Button>
                
                

                <MarModal showModal={showMarModal} setShowModal={setMarShowModal}/> 
                <OnlModal showModal={showOnlModal} setShowModal={setOnlShowModal}/>   
                <PomModal showModal={showPomModal} setShowModal={setPomShowModal}/>  
                <PonModal showModal={showPonModal} setShowModal={setPonShowModal}/>  
                <PopModal showModal={showPopModal} setShowModal={setPopShowModal}/>
                <PorModal showModal={showPorModal} setShowModal={setPorShowModal}/>
                <PriModal showModal={showPriModal} setShowModal={setPriShowModal}/>
               
            </SecondContainer>

            <ThirdContainer>
                <Button onClick={openSpiModal}> <img src={spi} alt="spi" height='300' width='200' /> </Button>
                <Button onClick={openTalModal}> <img src={tal} alt="tal" height='300' width='200' /> </Button>
                <Button onClick={openTotModal}> <img src={tot} alt="tot" height='300' width='200' /> </Button>
                <Button onClick={openTurModal}> <img src={tur} alt="tur" height='300' width='200' /> </Button>
                <Button onClick={openWhiModal}> <img src={whi} alt="whi" height='300' width='200' /> </Button>
                <Button onClick={openWinModal}> <img src={win} alt="win" height='300' width='200' /> </Button>
                <Button onClick={openYamModal}> <img src={yam} alt="yam" height='300' width='200' /> </Button>

                <SpiModal showModal={showSpiModal} setShowModal={setSpiShowModal}/>
                <TalModal showModal={showTalModal} setShowModal={setTalShowModal}/>
                <TotModal showModal={showTotModal} setShowModal={setTotShowModal}/>
                <TurModal showModal={showTurModal} setShowModal={setTurShowModal}/>
                <WhiModal showModal={showWhiModal} setShowModal={setWhiShowModal}/>
                <WinModal showModal={showWinModal} setShowModal={setWinShowModal}/>
                <YamModal showModal={showYamModal} setShowModal={setYamShowModal}/>

            </ThirdContainer>

This is the css for each of the containers

const Container = styled.div`

  display: flex;
  justify-content: center;
  align-items:center;
  height:40vh;
  
`;

const SecondContainer = styled.div`

    display: flex;
    justify-content: center;
    align-items:center;
    height:10vh;

`;

const ThirdContainer = styled.div`

    display: flex;
    justify-content: center;
    align-items:center;
    height:40vh;

`;

This is the css for the image buttons.

const Button = styled.button`
    min-width: 100px;
    padding:0px px;
    border-radius:0px;
    border:none;
    background:#FFF;
    color:#fff;
    font-size:24px;
    cursor:pointer;
    margin-right:20px;

`;

CodePudding user response：

I think your issue might be coming from the height of the images.

On your button component, you specify a min-width, but nothing about height. Leaving that will make the images overlap, even if the containers themselves don't. I'd try something like height: 100% on the Button component, which should limit the image height to the maximum container size.

Additionally, I wouldn't use a separate container for each row, since in an ideal case, the number of items could change depending on your resolution. You can check out the flex-wrap: wrap; property on flexbox for that.

Including a codepen with your setup would be super useful if you need a specific code answer.

CodePudding user response：

Try giving images height or removing the height attribute from direct image tag, otherwise it will make sure the image height is always 300px no matter the screen size.

// better use class selector
img {
  height: 100%;
}

It's better if you can maintain one flex parent instead of having 3 separate flex parents just use one parent and make it wrap by using flex wrap.