Helo, I have some museum website from internet with image uploading and displaying. To display them it is using php function foreach. Problem is it looks like in picture. I would like to make Title bigger and if description is long, it is covered by image in next row. Is there a way to fix that 2 thing? (Simple I want to make Title bigger and if description has more than 15 letters, it show after 15th letter ... and it will be full visible when you click on image on fullscreen.) Or is there a way to make it better?
.home .media-list {
display: flex;
flex-flow: wrap;
}
.home .media-list a {
display: block;
text-decoration: none;
position: relative;
margin-bottom: 60px;
margin-left: 30px;
}
.home .media-list a:nth-child(3n) {
margin-right: 0;
}
.home .media-list .placeholder {
display: flex;
flex-flow: column;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
background-color: #ddd;
color: #bbb;
font-weight: bold;
}
.home .media-list .placeholder i {
padding-bottom: 15px;
}
.home .media-list .description {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: absolute;
opacity: 0;
top: 0;
left: 0;
color: #fff;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
padding: 15px;
}
</style>
<div class="content home">
<div class="media-list">
<?php foreach ($media as $m): ?>
<?php if (file_exists($m['filepath'])): ?>
<a href="#" style="width:<?=$imgwidth?>px;height:<?=$imgheight?>px;">
<img src="<?=$m['filepath']?>" alt="<?=$m['imgdescription']?>" data-id="<?=$m['id']?>" data-title="<?=$m['title']?>" width="<?=$imgwidth?>" height="<?=$imgheight?>">
<div style="color:white; text-align:center; text-size:35px; font-size:15px;"><?=$m['title']?></div>
<div style="color:white; text-align:center;"> <?=$m['imgdescription']?></div>
<div style="color:white; text-align:center;"> <?=$m['seconddescription']?></div>
</a>
<?php endif; ?>
<?php endforeach; ?>
</div>
source https://stackoverflow.com/questions/70146143/bigger-font-and-limit-to-show-letters
Comments
Post a Comment