How to make a six DIV-model responsive - html

Question

I've made this model using six div's inside a container div. It works fine just as it is, but I would need to make it responsive to be compliant with WCAG 2.1. I've tried to use flexbox and grid but don't really figure out what would be the best way to achieve responsiveness on the model. I would only need one break point which puts all the divs on on column with the main topi on the top and the sub topics in descending order like the examples I made in powerpoint:
This is my code:
.container {
display: relative;
width: 700px;
height: 400px;
background-color: #BEE5F4;
}
.subTopics {
width: 250px;
height: 100px;
background: #94D9F2;
color: #000000;
font-weight: 700;
font-size: large;
}
p {
padding: 10px;
}
#subTopic1 {
position: absolute;
left: 25px;
top: 50px;
}
#subTopic2 {
position: absolute;
left: 425px;
top: 50px;
text-align: right;
}
#subTopic3 {
position: absolute;
left: 25px;
top: 250px;
}
#subTopic4 {
position: absolute;
left: 425px;
top: 250px;
text-align: right;
}
#mainTopic {
width: 250px;
height: 250px;
border-radius: 50% 50% 50% 50%;
border: solid 1px rgb(255, 255, 255);
background-color: #ffffff;
position: absolute;
left: 225px;
top: 75px;
text-align: center;
color: #000000;
font-weight: 700;
position: absolute;
overflow: hidden;
}
.tittel {
color: rgb(0, 0, 0);
position: relative;
top: 40px;
font-size: xx-large;
text-align: center;
color: #000000;
font-weight: 700;
}
.circeBack {
width: 290px;
height: 290px;
border-radius: 50% 50% 50% 50%;
background-color: #BEE5F4;
position: absolute;
left: 205px;
top: 55px;
}
a {
text-decoration: none;
color: #000000;
}
#mainTopic:hover {
background-color: rgb(255, 255, 255);
box-shadow: 2px 2px 22px 2px #94D9F2;
-webkit-box-shadow: 1px 1px 21px 1px #94D9F2;
-moz-box-shadow: 1px 1px 21px 1px #94D9F2;
}
#subTopic1:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px -20px 21px -4px #94D9F2;
-moz-box-shadow: -20px -20px 21px -4px #94D9F2;
}
#subTopic2:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px -20px 21px -4px #94D9F2;
-moz-box-shadow: 20px -20px 21px -4px #94D9F2;
}
#subTopic3:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px 20px 21px -4px #94D9F2;
-moz-box-shadow: -20px 20px 21px -4px #94D9F2;
}
#subTopic4:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px 20px 21px -4px #94D9F2;
-moz-box-shadow: 20px 20px 21px -4px #94D9F2;
}
<div class="container">
<div class="subTopics" id="subTopic1">
<a href="">
<p>Sub topic 1</p>
</a>
</div>
<div class="subTopics" id="subTopic2">
<a href="">
<p>Sub topic 2</p>
</a>
</div>
<div class="subTopics" id="subTopic3">
<a href="">
<p>Sub topic 3</p>
</a>
</div>
<div class="subTopics" id="subTopic4">
<a href="">
<p>Sub topic 4</p>
</a>
</div>
<div class="circeBack"></div>
<div class="circeFront" id="mainTopic">
<a href="">
<p class="tittel">Main <br> topic</p>
</div>
</div>

Answer 1

Is this what you're looking for? You'll have to view it in full screen mode and then play around with the screen width.
I added the dashed borders just so that you can see what's going on. This is something I often do during development, I find it helps me visualise the layout.
Thanks!
body {
background-color: #BEE5F4;
overflow-x: hidden;
}
.container {
position: relative;
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
.row {
position: relative;
display: flex;
flex-grow: 1;
border: 1px dashed red;
padding: 5px;
margin: 5px;
align-content: center;
justify-content: center;
}
.subTopics {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: #94D9F2;
color: #000000;
font-weight: 700;
font-size: large;
margin: 30px;
}
.circle-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
}
.circeBack {
position: relative;
width: 100%;
height: 100%;
border-radius: 50% 50% 50% 50%;
background-color: #BEE5F4;
}
#mainTopic {
width: 250px;
height: 250px;
border-radius: 50% 50% 50% 50%;
border: solid 1px rgb(255, 255, 255);
background-color: #ffffff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #000000;
font-weight: 700;
overflow: hidden;
}
.tittel {
color: rgb(0, 0, 0);
position: relative;
top: 40px;
font-size: xx-large;
text-align: center;
color: #000000;
font-weight: 700;
}
#media only screen and (max-width: 700px) {
.row {
flex-direction: column;
}
.row-desktop {
display: none;
}
.row-mobile {
display: flex;
align-items: center;
}
.subTopics {
margin: 30px 0px 30px 0px;
min-height: 100px;
}
}
#media only screen and (min-width: 701px) {
.row-desktop {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
}
a {
text-decoration: none;
color: #000000;
}
#mainTopic:hover {
background-color: rgb(255, 255, 255);
box-shadow: 2px 2px 22px 2px #94D9F2;
-webkit-box-shadow: 1px 1px 21px 1px #94D9F2;
-moz-box-shadow: 1px 1px 21px 1px #94D9F2;
}
#subTopic1:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px -20px 21px -4px #94D9F2;
-moz-box-shadow: -20px -20px 21px -4px #94D9F2;
}
#subTopic2:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px -20px 21px -4px #94D9F2;
-moz-box-shadow: 20px -20px 21px -4px #94D9F2;
}
#subTopic3:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: -20px 20px 21px -4px #94D9F2;
-moz-box-shadow: -20px 20px 21px -4px #94D9F2;
}
#subTopic4:hover {
background-color: rgb(255, 255, 255);
box-shadow: 10px 6px 21px -4px #94D9F2;
-webkit-box-shadow: 20px 20px 21px -4px #94D9F2;
-moz-box-shadow: 20px 20px 21px -4px #94D9F2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row row-mobile row-desktop">
<div class="circle-container">
<div class="circeBack"></div>
<div class="circeFront" id="mainTopic"><a href="">
<p class="tittel">Main <br> topic</p>
</div>
</div>
</div>
<div class="row">
<div class="subTopics" id="subTopic1"><a href="">
<p>Sub topic 1</p>
</a>
</div>
<div class="subTopics" id="subTopic2"><a href="">
<p>Sub topic 2</p>
</a>
</div>
</div>
<div class="row">
<div class="subTopics" id="subTopic3"><a href="">
<p>Sub topic 3</p>
</a>
</div>
<div class="subTopics" id="subTopic4"><a href="">
<p>Sub topic 4</p>
</a>
</div>
</div>
</div>
</body>
</html>