В моем следующем коде элементы хорошо позиционируются, когда я их просматриваю, когда они открываются в браузере со 100% масштабированием по умолчанию, но они смещаются при увеличении в браузере. Не могли бы вы подсказать мне, как заставить их держаться близко друг к другу? независимо от размера экрана или увеличения? Ссылка на проект github: https://github.com/xafak/FrontEndMentor-Four_Card_Feature_Section
Как выглядит, когда не увеличено:
Как выглядит, когда увеличено:
index. html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" />
<title>Frontend Mentor | Four card feature section</title>
</head>
<body>
<div class="top_container">
<h1 class="first_heading">Reliable, efficient delivery</h1>
<h1>Powered by Technology</h1>
<h4 class="third_heading">
Our Artificial Intelligence powered tools use millions of project data
points to ensure that your project is successful
</h4>
</div>
<div class="cards_container">
<div class="supervisor_container">
<div class="container_lower_part_all_cards">
<h2>Supervisor</h2>
<p>Monitors activity to identify project roadblocks</p>
</div>
<img
class="specified_icon"
src="images/icon-supervisor.svg"
alt="icon_supervisor"
/>
</div>
<div class="teambuilder_container">
<div class="container_lower_part_all_cards">
<h2>Team Builder</h2>
<p>
Scans our talent network to crete the optimal team for your project
</p>
</div>
<img
class="specified_icon"
src="images/icon-team-builder.svg"
alt="icon_teambuilder"
/>
</div>
<div class="karma_container">
<div class="container_lower_part_all_cards">
<h2>Karma</h2>
<p>
Regularly evaluates our talent to ensure quality
</p>
</div>
<img
class="specified_icon"
src="images/icon-karma.svg"
alt="icon_karma"
/>
</div>
<div class="calculator_container">
<div class="container_lower_part_all_cards">
<h2>Calculator</h2>
<p>
Uses data from past projects to provide better delivery estimates
</p>
</div>
<img
class="specified_icon"
src="images/icon-calculator.svg"
alt="icon_calculator"
/>
</div>
</div>
<p class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="https://github.com/xafak">Sanzar Farooq</a>.
</p>
</body>
</html>
styles. css:
.attribution {
font-size: 11px;
text-align: center;
display: inline-block;
position: relative;
top: 25rem;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
body {
text-align: center;
position: fixed;
font-family: "Poppins", sans-serif;
font-weight: 200, 400, 600;
font-size: 15px;
background-color: hsl(0, 0%, 98%);
display: inline-block;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
}
.first_heading {
font-weight: normal;
line-height: 0;
}
.third_heading {
font-size: medium;
font-weight: normal;
width: 50%;
margin: 0 auto;
}
.top_container {
margin: 40px auto 0 auto;
text-align: center;
}
.cards_container {
margin-top: 20px;
}
.container_lower_part_all_cards {
position: relative;
text-align: left;
padding-left: 30px;
padding-right: 30px;
}
.specified_icon {
position: absolute;
top: 70%;
left: 75%;
}
/* supervisor_container specifications*/
.supervisor_container {
border-top: solid 7px;
border-top-color: hsl(180, 62%, 55%);
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2%;
width: 430px;
height: 300px;
display: inline-block;
position: relative;
top: 10rem;
left: 11rem;
}
/* teambuilder_container specifications*/
.teambuilder_container {
border-top: solid 7px;
border-top-color: hsl(0, 78%, 62%);
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2%;
width: 430px;
height: 300px;
display: inline-block;
position: relative;
top: 2rem;
left: 13.3rem;
}
/* karma_container specifications*/
.karma_container {
border-top: solid 7px;
border-top-color: hsl(34, 97%, 64%);
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2%;
width: 430px;
height: 300px;
display: inline-block;
position: relative;
top: 24rem;
left: -13.5rem;
}
/* calculator_container specifications*/
.calculator_container {
border-top: solid 7px;
border-top-color: hsl(212, 86%, 64%);
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2%;
width: 430px;
height: 300px;
display: inline-block;
position: relative;
top: 11.4rem;
left: -11.5rem;
}