I have a 2 by 2 CSS Grid. Each grid box has a circular button. The desired UI is something like:
Instead, my UI is in a dismal state, as shown below:
I suspect the main reason to be the transform: translateY(k%);, which I used to move the buttons around in my code editor, but they don't seem to be very responsive. How can I resolve this error? I've already tried accommodating the solution at Centering CSS Grid by using flexbox, but to no avail. Here is the relevant code:
.container{
display: grid;
grid-gap: 20px;
height: 97vh;
width: 97vw;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"blockOne blockTwo"
"blockThree blockFour"
}
.item{
background-color: whitesmoke;
border: 0px solid black;
box-shadow: 5px 5px;
}
.block1{
grid-area: blockOne;
}
.block2{
grid-area: blockTwo;
height: 100%;
}
.block3{
grid-area: blockThree;
height: 100%;
}
.block4{
grid-area: blockFour;
height: 100%;
}
.item:hover{
background-color: lightblue;
transition: ease 0.3s;
}
*{
transition: ease 0.3s;
}
.call{
background-color: black;
width: 250px;
height: 250px;
border-radius: 150px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(30%);
box-shadow: 5px 5px;
background-image: url("https://www.levelaccess.com/wp-content/uploads/2017/11/CVAA-02.png");
background-position: center;
background-size: 230px;
transition: 0.70s ease;
}
.call:hover{
transition: 0.70s ease;
background-color: whitesmoke;
}
.info{
background-image: white;
width: 250px;
height: 250px;
border-radius: 150px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
box-shadow: 5px 5px;
background-image: url("https://s3.us-east-2.amazonaws.com/upload-icon/uploads/icons/png/5851494071557740370-512.png");
background-size: cover;
background-position: center;
background-size: 100px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.info:hover{
background-size: 300px;
}
.rehab{
background-color: red;
width: 250px;
height: 250px;
border-radius: 150px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
box-shadow: 5px 5px;
background-image: url("data:image/=");
background-position: center;
background-size: contain;
background-size: 50px;
}
.rehab:hover{
background-size: 100%;
}
.CPR{
background-color: red;
width: 250px;
height: 250px;
border-radius: 150px;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
box-shadow: 5px 5px;
background-image: url("https://www.humankind.org/wp-content/uploads/2018/08/ems-icon-doing-cpr-300x300.png");
background-size: cover;
transition: 0.3s ease-in-out;
}
.CPR:hover{
background-image:url("https://thumbs.gfycat.com/AdmiredGorgeousHousefly-size_restricted.gif");
background-size: contain;
background-position: 5px 45px;
transition: 0.3s ease-in-out;
}
The website itself is at refath.github.io/I-Care. Any help is greatly appreciated. Thank you.
