Cannot convert divider in responsive design - css

Question

I have created a template which have the page divided in two sections, when I display the site in a desktop resolution all works well, but when I run the site on a smartphone I get the half circle on top and the divider between the two images, not responsive:
Essentially the half red circle, should be reduced in a smartphone resolution, and the divider goes outside the two images, this is what I tried so far:
#media (max-width: 800px) {
.divider{
top: 14.5%;
left: 50%;
height: 64.2%;
transform: translateX(-50%);
}
.circle{
top: -45%;
left: 50%;
width: 500px;
height: 400px;
border-radius: 50%;
}
.logo{
top: 0.5%;
left: 22.5%;
}
}
the problem's that this doesn't cover all the resolution case, so the problem is not fixed at all.
Is there a way to handle all the resolutions and make that template really responsive?
This is my fiddle.
SNIPPET:
body {
background-color: #ffffff;
}
/*Overlay*/
.hovereffect {
width: 50%;
height: 90vh;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #a7151f;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 50px 20px;
justify-content: center;
flex-direction: column;
display: flex;
}
.hovereffect img {
float: left;
width: 50%;
height: 90vh;
display: block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 40px;
overflow: hidden;
padding: 0.5em 0;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect a,
.hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.hovereffect:hover a,
.hovereffect:hover p,
.hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
font-size: 16px;
}
/*DIVISORE*/
.middle {
position: absolute;
z-index: 9999;
}
.divider {
border-right: 5px solid #a7151f;
position: absolute;
z-index: 10;
top: 14.5%;
left: 50%;
margin: 0;
padding: 0;
width: auto;
height: 76.2%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
}
.circle {
z-index: 10;
position: absolute;
top: -250px;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
}
.first {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.second {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.logo {
top: 2.5%;
position: absolute;
left: 41.5%;
width: 200px;
margin: 0 auto;
}
<link href="https://demos.creative-tim.com/material-kit-pro/assets/css/material-kit.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Site
</title>
</head>
<body class="sections-page sidebar-collapse">
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="hovereffect">
<img class="first">
<div class="overlay">
<h2>First</h2>
<p>
Explore
</p>
</div>
</div>
<span class="divider"></span>
<img class="img-responsive center-block circle">
<span class="circle">
</span>
<img src="#" class="logo" style="z-index: 9999">
<div class="hovereffect">
<img class="second">
<div class="overlay">
<h2>Second</h2>
<p>
Explore
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center justify-content-xl-between">
<div class="col-6">
<div class="copyright text-center text-xl-left text-muted">
© 2019 Credit
</div>
</div>
<div class="col-6">
<div class="row">
Privacy Policy
Terms & Conditions
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>

Answer 1

This kind of layout can be achieved with Flexbox with many fewer lines of code. Also, much less HTML markup is required.
Total responsiveness is achieved combining the flexbox behavior with relative units (%, vh, vw).
I put several comments in the CSS to explain what each rule is doing.
body { margin: 0; }
.the-container {
position: relative;
overflow: hidden;
height: 100vh; /* fill the screen */
width: 100vw; /* fill the screen */
}
.the-circle {
position: absolute; /* overlap the pics, removes it from the box flow */
background-color: #a7151f;
border-radius: 50%; /* rectangle becomes an ellipse */
width: 60vw;
height: 30vh;
top: -15vh; /* half of the height */
left: 0; /* these 3 lines... */
right: 0; /* ...keep the "circle"... */
margin: auto; /* ...centered at the top */
}
.the-image-wrapper {
display: flex; /* easy responsive columns */
height: 100%; /* fill the screen */
}
.the-image-wrapper > div {
flex: 1 0 auto; /* items inside the wrapper will grow to fit avilable space */
}
.the-image-wrapper > div.the-divider {
flex: 0 1 5px; /* this divider item will not grow, and will be 5px wide */
background-color: #a7151f;
}
.first {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.second {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="the-container">
<div class="the-circle"></div>
<div class="the-image-wrapper">
<div class="first"></div>
<div class="the-divider"></div>
<div class="second"></div>
</div>
</div>