I'm attempting to position a group of elements in the top left corner of a webpage. Everything looks good when the browser is at its maximum width. However, once the browser width decreases to less than the width of the largest element (outer-circle of 927px), a horizontal scrollbar appears. I want the elements to scale down dynamically to prevent the appearance of the scrollbar. While I could individually resize each element using media queries, I am curious if there's a more efficient way to achieve this.
I experimented with placing the group inside a bootstrap column, but that did not solve the issue. I also tried setting the element sizes in viewport units (e.g., setting .inner-circle width and height to 20vw). This approach seemed to work initially, but as I resized the browser window, the elements moved off the page.
Here's the HTML code:
<div class="corner">
<div class="moon"></div>
<div class="inner-circle"></div>
<div class="mid-circle"></div>
<div class="outer-circle"></div>
</div>
And here's the CSS code:
.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;
}