CSS HELP

HOW DO I MAKE A RESPONSIVE SQUARE

24 Replies

13eck•5mo ago

What have you tried? What isn't working? What does your code look like currently? Please read #How To Ask Good Questions

damnOP•5mo ago

sorry i havent read that

13eck•5mo ago

I figured. That's why I pointed it out to you :p

damnOP•5mo ago

so i was using percentages but i know it doesnt work because they use viewport ones but if i give width in pixels is may not be responsive at some point

13eck•5mo ago

What are you trying to do? What do you mean by "responsive"? What's the goal? Percentages are always "responsive" as they respond to the parent container's size. Pixels are never responsive as they are the same size

damnOP•5mo ago

damnOP•5mo ago

so i was making a bingo website i need a square the black thing suposed to be square

Jochem•5mo ago

Like Beck said, share your code. Give #How To Ask Good Questions a read, there's tips on how to share your code in a way that makes it possible for people to answer your questions

damnOP•5mo ago

bruh

Jochem•5mo ago

what do you mean "bruh"

damnOP•5mo ago

<div class="bingopage">
        <div class="pageinner">
            <div class="bingotext">
                <div class="you">
                    <p class="big">
                        SHAWN
                    </p>
                    <p class="small">you</p>

                    
                </div>
                <div class="oponent">
                    <p class="big">
                        JOHN
                    </p>
                    <p class="small">oponent</p>
                </div>
            </div>
            <!-- <div class="totalb"> -->
                <div class="bingospace">
                    <div class="nextplayer">
                        <p>JOHN is selecting a number</p>
                    </div>
                    <div class="bingocard">
                    
                    </div>
                    <div class="bingooptions">
                        <div class="reset bo">
                            reset
                        </div>
                        <div class="bingo bo">
                            bingo
                        </div>
                        <div class="flag bo">
                            flag
                        </div>
                    </div>
                </div>
            <!-- </div> -->
        </div>

<div class="bingopage">
        <div class="pageinner">
            <div class="bingotext">
                <div class="you">
                    <p class="big">
                        SHAWN
                    </p>
                    <p class="small">you</p>

                    
                </div>
                <div class="oponent">
                    <p class="big">
                        JOHN
                    </p>
                    <p class="small">oponent</p>
                </div>
            </div>
            <!-- <div class="totalb"> -->
                <div class="bingospace">
                    <div class="nextplayer">
                        <p>JOHN is selecting a number</p>
                    </div>
                    <div class="bingocard">
                    
                    </div>
                    <div class="bingooptions">
                        <div class="reset bo">
                            reset
                        </div>
                        <div class="bingo bo">
                            bingo
                        </div>
                        <div class="flag bo">
                            flag
                        </div>
                    </div>
                </div>
            <!-- </div> -->
        </div>

Jochem•5mo ago

and the CSS for the bingocard class?

damnOP•5mo ago

im trying 😭😭

.bingopage{
   
    width: 100%;
    height: 100%;
    background-image: url(/pics/new4.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pageinner{
    border-radius: 10px;
    height: 80%;
    width: 80%;
    background-color: rgba(245, 245, 245, 0.182);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}



.bingotext{
    height: 20%;
    width: 95%;
    /* min-height:100px; */
    /* background-color: rgb(22, 22, 4); */
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 0 2em;
}
.big{
    font-size: 1.2rem;
    color: white;
    font-weight: 700;
    
}
.small{
    font-size: 0.7rem;
    color:white;
    font-weight: 500;
    text-align: center;
}

.bingospace{
    height: 80%;
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.nextplayer{
    height: 15%;
    font-size: 0.8rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}
.bingocard{
    height: 50%;
    width: 50%;
    background-color: black;
}
.bingooptions{
    height: calc(85%-300px);

    display: flex;
    justify-content: center;
    gap:1em;
    align-items: center;
}
.bo{

}

.bingopage{
   
    width: 100%;
    height: 100%;
    background-image: url(/pics/new4.jpg);
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pageinner{
    border-radius: 10px;
    height: 80%;
    width: 80%;
    background-color: rgba(245, 245, 245, 0.182);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}



.bingotext{
    height: 20%;
    width: 95%;
    /* min-height:100px; */
    /* background-color: rgb(22, 22, 4); */
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 0 2em;
}
.big{
    font-size: 1.2rem;
    color: white;
    font-weight: 700;
    
}
.small{
    font-size: 0.7rem;
    color:white;
    font-weight: 500;
    text-align: center;
}

.bingospace{
    height: 80%;
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.nextplayer{
    height: 15%;
    font-size: 0.8rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}
.bingocard{
    height: 50%;
    width: 50%;
    background-color: black;
}
.bingooptions{
    height: calc(85%-300px);

    display: flex;
    justify-content: center;
    gap:1em;
    align-items: center;
}
.bo{

}

finally so height: calc(85%-300px); ignore this i forgot to remove

13eck•5mo ago

calc requires spaces around + and - Otherwise it sees +2 as a positive unit and -2 as a negative unit

damnOP•5mo ago

oh any solve for square thing .bingocard

13eck•5mo ago

I'm still not sure at all what you're trying to accomplish. What's the goal? If you want a square you need to set the height and width to be the same. That's gonna be difficult to maintain on mobile views as the screen is pretty narrow. Would a rectangle work? If you want it to be responsive a square is gonna be extremely difficult. With a square you need to constantly change the font size to keep the aspect ratio and at a certain point the font is too small to read comfortably. With a rectangle you don't have to adjust the font size and just adjust the width of the element and let it grow in height as-needed

damnOP•5mo ago

so the bingo actually is a game of 2 players In which a bingo board contains 5x5 squares with random 1 to 25 numbers first one to complete the 5 winning postions like a column a diagonal or a row wins

Chris Bolson•5mo ago

I don't fully understand what you are trying to achieve as your Codepen looks incomplete, at least it doesn't have any squares within the card. I suspect that you may be adding them via JS or simply haven't added them for the purpose of the demo. That said, with modern CSS if you ever need a square the simplest method is to use aspect-ratio: 1; and only set either the width or the height.

damnOP•5mo ago

yes js is used to dynamically add the inner squares with numbers

Chris Bolson•5mo ago

I am pretty sure you could get what you want using aspect-ratio, both on the container (which I presume would be a grid) and the number cells themselves.

Chris Bolson•5mo ago

Something like this (I played around with the font-size and set a min with for the container) https://codepen.io/cbolson/pen/KKjWoOO

Chris Bolson

CodePen

https://discord.com/channels/436251713830125568/1268561912581455884...

...

damnOP•5mo ago

thanks 😄

Gaming

Programming

CSS HELP