CSS-based poker table does not scale at smaller sizes

user_1045755 0
Viewed 697

I have tried to create a poker table in CSS, which I think is actually pretty decent as of now:

https://jsfiddle.net/78fcs01m/3/

CSS:

.poker-container {
    display: grid;
    width: 100vw;
    height: 100vh;

    .poker-table {
        justify-self: center;
        align-self: center;
        max-width: 800px;
        width: 100%;
        max-height: 360px;
        height: 100%;
        background-color: $poker-table-outside-ring-color;
        border-radius: 180px;
        position: relative;
        display: grid;

        .outside-ring {
            max-width: 740px;
            max-height: 300px;
            width: 100%;
            height: 100%;
            background: $poker-table-color-light;
            background: radial-gradient(circle, $poker-table-color-light -30%, $poker-table-color-dark 90%);
            position: absolute;
            border-radius: 180px;
            justify-self: center;
            align-self: center;
            border: 5px $poker-table-outside-ring-border-color solid;
        }

        .inside-ring {
            max-width: 640px;
            max-height: 200px;
            width: 100%;
            height: 100%;
            border: 5px rgba($white-color, 0.5) solid;
            position: absolute;
            justify-self: center;
            align-self: center;
            border-radius: 180px;
        }
    }
}

HTML:

<div class="poker-container">
    <div class="poker-table">
        <div class="outside-ring"></div>
        <div class="inside-ring"></div>
    </div>
</div>

My problem, however, is that I would like it to be responsive to smaller window sizes etc. So if you resize the window you will see that the outer ring will first shrink, then the next ring, and so on. In principle I would like everything to resize together so the table aspect ratio stays the same, only scaled.

What am I missing here ?

responsive-design css
1 Answers

Inside ring is smaller than outside ring (100px in max-width). But you defined width:100% for both of them. You should apply difference in width too.

.outside-ring {
    width: calc(100% - 100px);
}

.inside-ring {
    width: calc(100% - 200px);
}
user_91130800
Related