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>
3
Answers
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.
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:Use figcaption for your image, then you can change the location with CSS using the .imgDiscription class.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption