Scaling down group of CSS shapes

Question

I'm trying to make a group of elements sit in the upper left corner on a webpage. When the browser is at its max, the elements look fine. But when the browser width becomes less than the biggest element's width (outer-circle of 927px), the horizontal scrollbar appears. I would like to make it so that the elements scale down and that the horizontal scrollbar doesn't appear. I could resize all of the individual elements with media queries but I wanted to know if there's a better way of doing it.

I tried inserting the group into a bootstrap column and that didn't do anything. I also tried setting the element sizes to vw (example is setting .inner-circle width and height to 20vw). That worked until I started resizing the browser and the elements shifted off of the page.

HTML:

<div class="corner">
        <div class="moon"></div>
        <div class="inner-circle"></div>
        <div class="mid-circle"></div>
        <div class="outer-circle"></div>
</div>

CSS:

.moon{
    position: absolute;
    width: 240px;
    height: 240px;
    left: 170px;
    top: -40px;   

    border-radius: 50%;
    box-shadow: -80px 50px white;
}                   
.inner-circle {
    position: absolute;
    width: 635px;
    height: 598px;
    left: -134px;
    top: -300px;

    border-radius: 50%;
    background:rgba(229, 227, 238, 0.5);
    opacity: 0.4;
}
.mid-circle {
    position: absolute;
    width: 841px;
    height: 795px;
    left: -240px;
    top: -400px;

    border-radius: 50%;
    background: rgba(229, 227, 238, 0.5);
    opacity: 0.3;
}
.outer-circle {
    position: absolute;
    width: 927px;
    height: 902px;
    left: -230px;
    top: -410px;

    border-radius: 50%;
    background: rgba(229, 227, 238, 0.5);
    opacity: 0.2;
}

You can achieve this shape using one element then you can easily control the dimension: https://stackoverflow.com/a/55826619/8620333 — Temani Afif, Jun 11 '19 at 08:38

score 0 · Answer 1 · answered Jun 11 '19 at 06:22

0

You have given the values in px. Better give in perecentages, so that it will adjust with respect to the screen. Or try giving position relative to the parent div 'corner'.

answered Jun 11 '19 at 06:22

Himabindu

634
8
22

score 0 · Answer 2 · answered Jun 11 '19 at 06:26

0

Try using the following css properties:

max-width: (your width)px;
width: 100%;

This will decrease the size of your div as your screen size starts to get smaller than the set width.

answered Jun 11 '19 at 06:26

Corné

1,304
3
13
32

Scaling down group of CSS shapes

2 Answers2