Currently, I am utilizing the :before pseudo-element on a 100% width div to create a curved top, which is functioning correctly. However, I am facing the issue of adjusting the height of the :before element through media queries whenever the browser width is changed, which is not an ideal solution. Is there a way to achieve this using JavaScript or preferably pure CSS? I have shared some code for reference (optimized for full-screen viewing and viewport width adjustments).
My goal is to eliminate the need for multiple media query breakpoints by automatically adjusting the height, top values of the :before pseudo-element, and the margin-top of .our-team-panel based on the viewport width. Given that this involves dynamically altering CSS values, it would be necessary for the code to be inline rather than in a separate CSS file.
This customization needs to be applied to various divs, resulting in slightly different curved designs and starting heights for each.
.our-team-panel{
background-color: #d4f938;
margin-top: 366px;
position: relative;
padding: 100px 0;
}
.our-team-panel:before {
background: transparent url('https://1bluestring.org.uk/our-team-bg-top.svg') no-repeat center bottom -1px;
content: '';
position: absolute;
top: -366px;
left: 0;
right: 0;
width: 100%;
height: 366px;
}
@media only screen and (max-width: 2000px) {
.our-team-panel {
margin-top: 287px;
}
.our-team-panel:before{
top: -287px;
height: 287px;
}
}
@media only screen and (max-width: 1500px) {
.our-team-panel {
margin-top: 216px;
}
.our-team-panel:before{
top: -216px;
height: 216px;
}
}
@media only screen and (max-width: 1000px) {
.our-team-panel {
margin-top: 144px;
}
.our-team-panel:before{
top: -144px;
height: 144px;
}
}
@media only screen and (max-width: 768px) {
.our-team-panel {
margin-top: 111px;
}
.our-team-panel:before{
top: -111px;
height: 111px;
}
}
@media only screen and (max-width: 500px) {
.our-team-panel {
margin-top: 73px;
}
.our-team-panel:before{
top: -73px;
height: 73px;
}
}<section class="our-team-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar magna vitae nulla ultrices, in hendrerit augue rhoncus. Vivamus sodales sapien sit amet ligula malesuada facilisis ac eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed at orci orci. Cras interdum, leo sit amet elementum posuere, nunc tortor cursus turpis, vel posuere nisl justo ut elit. Curabitur velit leo, varius varius sollicitudin euismod, tristique nec ex. In et vulputate risus.</p>
<p>Nam mattis, elit at ornare bibendum, leo magna imperdiet velit, sit amet pharetra nunc est a nisl. Donec auctor at libero sit amet feugiat. Integer sed orci at lectus porta porttitor sit amet fringilla nisi. Nullam et auctor elit. In euismod scelerisque nulla, ullamcorper dapibus lectus interdum ac. Etiam at ultricies tortor, nec pretium dolor. Nunc euismod tempus elit. Aliquam placerat mauris in aliquam consequat. Morbi at tempus odio. Vestibulum vestibulum facilisis lorem vel varius. Sed eu consectetur magna, non semper massa. Etiam eget molestie dui. Sed convallis urna at massa aliquet pharetra. Vestibulum dictum neque erat, quis fermentum est consectetur a. Sed auctor tortor ex, sit amet lobortis dolor porta ut. Donec auctor in neque in accumsan.</p>
</section>