Ustawienie flexów

Question

Witam. walczę z ustawieniem flexów ale już zaczyna mi brakować pomysłów.... Próbowałem na kilka sposobów.

Dodanie oddzielnego diva 'title' poza 'font'. Niby zadziałalo na stronie ale w wersji mobilnej napisy były poza obrazkami. Jak próbuje w jednej sekcji z obrazkami to napis wyświetla się obok nich a nie pod.. Walcze z tym już dobre ponad 2h. Tracę nadzieję, może wy mnie nakierujecie co robię źle

https://codepen.io/Kondziks/pen/WNgEqex

Answer 1

Czy o taki efekt chodzi

[ on-line ]

  ...
  .font {
    margin-top: 10px;
    display: flex;
  }
  .square {
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
    width: 360px;
    height: 222px;
    background-color: #ab2e12;
    margin: 10px;
    text-align: center;
  }
  .material-symbols-outlined {
    color: white;
    font-size: 200px;
  }
  .title {
    color: white;
    padding-bottom: 1em;
  }

  @media (max-width: 800px) {
    .font {
      flex-direction: column;
      align-items: center;
      justify-content: center;  
    }
  }

 

Comments

Nie o to mi chodziło. Chodzi mi to żeby pod tym zdjęciem dodać tytuł i opis. Nie wewnątrz zdjęcia

---

Czyli, tak?

[ on-line ]

...

  <div>
    <div class="square">
      <div class="material-symbols-outlined">attach_money</div>
    </div>
    <div class="title">Brak prowizji</div>
  </div>

...

 

tylko nie wiem jak się odniesć do

  #home-article conteiner {
    height: 1000px;
  }

 

bo nie ma w Twoim przykładzie odniesienia w kodzie html.

 

BTW, tu jest błąd, pewnie chodzi o klasę (brakuje kropki przed "conteiner")

#home-article .conteiner

---

Tak zgadza się. Zmienileś tylko to 

...
 
  <div>
    <div class="square">
      <div class="material-symbols-outlined">attach_money</div>
    </div>
    <div class="title">Brak prowizji</div>
  </div>
 
...

Czy jeszcze coś w css. Właśnie poradzilem sobie dodając jeszcze jednego diva BOX. Jak to możliwe, że ja kombinowalem w ten sposób i to nie działało ;_;.
No cóż ważne, że działa dziękuję za pomoc

Co do container to chciałem sobię wydłużyć trochę pole robocze. Bo mi nachodziły artykuły na siebie, ale w jakiś inny sposób to ogarnąłem. Już nie pamiętam bo mi głowa paruje od tych flexboxów

---

Jeszcze mam jedno pytanie. BARDZO DZIWNA rzecz. Mianowicie jak widać na obrazku. Lewa strona jest drastycznie w dół. Nic nie zmieniałem indywidualnie. Wszystko jest zrobione w css title i desc. Jak sprawdzałem na mozilli zbadaj element. To wychodzi, że ten tytuł ma wysokość 75 px a reszta ma 35px... Jak dam któryś z innych divów w to miejsce i zmienię ikone na dolara spowrotem to nic się nie dzieje wszystko jest w jednej linni. Ale jeżeli zmienię tytuł na jakikolwiek naglę się wszystko rozjeżdza

<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: 40px;
}
.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;
height: 35px;
  display: flex;
  font-size: 25px;
  font-weight:700;
}

.desc{
  padding-top: 12px;
  border-top: 1px solid #ab2e12;
  }

@media (max-width: 800px) {
  .font, .title {
    flex-direction: column;
  }
}
</style>
<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">Inny tytul</div>
    <div class="desc"></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ą. Zapraszamy do skorzystania z naszej <strong>darmowej miesięcznej</strong> 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średniczmy podczas pokazywania czy tudież sprzedaży nieruchomości. Umawiają oraz spotykają się Państwo indywidualnie.</div>
  </div>
</div>

Okej chyba rozumiem o chodzi. Flexbox sie porusza. Jak zmieniłem czcionkę na większa to wszystko się rozjechało. Można w jakiś sposób ustawić aby on był stały? i rozciągał się tylko w doł?