Witam.
Mam problem z pozycjonowaniem się elementów. Jak widać na zamieszonym obrazie, pierwszy kwadrat pozycjonuje się dobrze z tytułem oraz opisem. A pozostałe dwa nie. Pozycjonują się tak jakby pomiędzy kwadraty a nie do kwadratów.
A drugi problem to pozycjonowanie się opisu względem tytułu. Jak widać na obrazie rozjeżdża się. Dzieje się tak np. przy zamianie font-size w opisie.
https://jsfiddle.net/api/post/library/pure/
Dziękuję za pomoc.
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<style type="text/css">
.box {
display: flex;
flex-direction: column;
align-items: center;
}
.main_txt{
margin-top: 0px;
text-align: center;
text-shadow: 3px 3px 3px #a9a9a9;
font-size: 38px;
}
.main_txt h3
{
margin-top: -8px;
margin-bottom: -2px;
font-weight: 400;
}
.font{
margin-top: 10px;
display: flex;
flex-flow: row nowrap;
}
.square{
border-radius: 25px;
flex: 1;
display: flex;
width: 360px;
height: 222px;
background-color:#ab2e12;
margin: 10px;
font-size:0;
text-align: center;
}
.material-symbols-outlined {
align-items:center;
justify-content: center;
color: white;
font-size: 200px;
flex: 1;
display: flex;
}
.title{
flex:1;
display: flex;
font-size: 25px;
font-weight:700;
}
.desc{
flex:1;
display:flex;
align-items: flex-start;
padding-top: 10px;
border-top: 3px solid #ab2e12;
border-bottom: 3px solid #ab2e12;
font-size: 20px;
}
.box2 {
display: flex;
flex-direction: column;
align-items: center;
}
.about_us{
display:felx;
flex:1;
font-size: 20px;
margin-top: 10px;
color:white;
text-align: justify;
background-color:#ab2e12;
padding: 15px;
border-radius: 25px;
font-weight: 500;
}
.about_us_title{
display:felx;
flex:1;
font-weight: 700;
font-size:30px;
margin-top: 20px;
}
@media (max-width: 800px) {
.font, .title {
flex-direction: column;
}
}
</style>
<div clas="codepen">
<div class="main_txt"><h3>Centrum Zarządzania <strong>Nieruchomościami</strong></h3></div>
<div class="font">
<div class="box">
<div class="square">
<span class="material-symbols-outlined">attach_money</span>
</div>
<div class="title">Brak prowizji</div>
<div class="desc">Nie pobieramy od Państwa żadnych prowizji</div>
</div>
<div class="box">
<div class="square">
<span class="material-symbols-outlined">campaign</span>
</div>
<div class="title">Kampania reklamowa</div>
<div class="desc">Zajmujemy się profesjonalną kampanią reklamową Państwa nieruchomości. Zapraszamy do skorzystania z naszej darmowej miesięcznej kampani reklamowaj.</div>
</div>
<div class="box">
<div class="square">
<span class="material-symbols-outlined">handshake</span>
</div>
<div class="title">Brak pośrednictwa</div>
<div class="desc"> Nie pośredniczymy podczas procesu sprzedaży nieruchomości. Umawiają się Państwo samodzielnie z potencjalnym klientem.</div>
</div>
<div class="box">
</div>
</div>
<div class="box2">
<div class="about_us_title"> Jak działamy?</div>
<div class="about_us">Naszym głównym zadaniem jest pomóc Państwu w jak najszybszej sprzedaży nieruchomości poprzez stworzenie profesjonalnej kampanii reklamowej. Dzięki temu jesteśmy w stanie w krótkim czasie trafić do szerokiego grona potencjalnych klientów. Nasza kampania reklamowa opiera się głównie na ogłaszaniu Państwa nieruchomości na wielu portalach internetowych oraz social mediach. Nasza firma nie pobiera przy tym żadnych prowizji ponieważ nie uczestniczymy w procesie sprzedaży. Cały kontakt odbywa się pomiędzy klientem a właścicielem. Jeżeli życzą sobie Państwo całkowitą obsługę biura, jesteśmy jak najbardziej do Państwa usług.
</div>
</div>