Problem with flexbox. How to add new div in row? - Html

KonradKoak
March 7, 2023
167 views
3 votes
3 Answers

I want to make a section with an img, title and desctription, with 3 img’s in one row.

Img
Title
Desc

I used flexbox I did the first step and created 3 imgs in one row with google fonts. Now I want to add a title below them and I have a problem becasue the text is being placed next to the img instead of below it.

I’ve tried doing it in several ways.

Adding a separate ‘title’ dive outside the ‘font’ dive. It seemed to work on the website, but in the mobile version the subtitles were placed outside the pictures. When I try in one section with pictures, the inscription is displayed next to them, not under them. I’ve been fighting with this for over 2 hours. I’m losing hope, maybe you can guide me with what I’m doing wrong?

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" rel="stylesheet" />
<style type="text/css">

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

.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{
  /*display: inline-block;*/
  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;
}


@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="square"><span class="material-symbols-outlined">attach_money</span></div>
<div class="title">Brak prowizji</div>

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

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


</div>

Answers

Chosen as BEST ANSWER

I have another problem with positioning. Like you can see in the "desc" section i have a problem with those elements. They are not in the same position and my next problem is with positioning the squares. The first element is positioned correctly, we can see a gap between the first element and the second element but between the second and third element we don't have a gap. The second and third description sections don't match their corresponding squares evenly. I pointed this out on the image. What could be the problem?

Another issue I have is with the size of the gaps between the title and the description in the first and third squares even though there is no gap in the middle square. Another problem is that the descriptions move around in uneven ways when I change their font size.

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],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;
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; 
  text-align: justify;
}

.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 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ą. 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średniczmy podczas pokazywania czy tudież sprzedaży nieruchomości. Umawiają oraz spotykają się Państwo indywidualnie.</div>
  </div>

  <div class="box">
    
  </div>
</div>
<div class="box2">
<div class="about_us_title"> O naszej firmie</div>
<div class="about_us">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</div>
</div>

(Edit)

You can wrap each image and title in a separate container, apply flexbox to this container div and set the flex-direction to column. Your code should look like this:

<div class="font">
  <div class="container">
    <div class="square">
      <span class="material-symbols-outlined">attach_money</span>
    </div>
    <div class="title">Brak prowizji</div>
  </div>
  
  <div class="container">
    <div class="square">
      <span class="material-symbols-outlined">campaign</span>
    </div>
    <div class="title">Brak prowizji</div>
  </div>
  
  <div class="container">
    <div class="square">
      <span class="material-symbols-outlined">handshake</span>
    </div>
    <div class="title">Brak prowizji</div>
  </div>
</div>

<style>
  .font {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
  }
  
  .square {
    border-radius: 25px;
    width: 360px;
    height: 222px;
    background-color: #ab2e12;
    margin-bottom: 10px;
    font-size: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .material-symbols-outlined {
    color: white;
    font-size: 200px;
  }
  
  .title {
    font-size: 60px;
    color: white;
    text-align: center;
  }
</style>

- MathijsG
- March 7, 2023 at 2:49 pm
- 0 votes
0
Use figcaption for your image, then you can change the location with CSS using the .imgDiscription class.
```
<figure>
    <img src="..."/>
    <figcaption class="imgDiscription">This is an image 
    discription</figcaption>
</figure>
```
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Problem with flexbox. How to add new div in row? – Html

Answers