При добавлении к иконки i элемента a (ссылка) все ломается!!!
Ситуация такая при сужении экрана работало все нормально блоки адаптировались ! После того как добавил к иконке тег а(ссылка) блок начал ломаться (те цетральный блок начал сползать вниз создовая по середине пробел!
<div class="rightFavorites">
<div class="container">
<div class="rightFavorites-title">
<h2>My Favorites</h2>
</div>
<a href="">
<div class="righFavorites-module">
<div class="righFavorites-inner">
<div class="righFavorites-item-img">
<img src="/_ClassifiedDesign/Layout-03-Ecommerce/images/test2.jpg" alt="">
</div>
<div class="righFavorites-item-box">
<div class="righFavorites-box-title">
<span>Пряжа мохер и хлопок травка выввввввввввфвф</span>
</div>
<div class="righFavorites-box-price">
<span>
<h4>20000 Euro</h4>
</span>
</div>
<div class="righFavorites-box-location">
<span>
<h5>Tallinn, Häädemeeste vald, Pärnumaa </h5>
</span>
</div>
<div class="righFavorites-box-date">
<span>
<h5>22.01.2024</h5>
</span>
</div>
</div>
<div class="righFavorites-item-iqon">
<div class="test2341">
<a href=""><i class="righFavorites-itel-letter fa-solid fa-envelope"></i></a>
</div>
<i class="righFavorites-itel-trash fa-solid fa-trash"></i>
</div>
</div>
</div>
</div>
</a>
</div>
/*Favodite-dashboard*/
.rightFavorites {
}
.rightFavorites-title{
margin-bottom: 30px;
}
.righFavorites-module {
}
.righFavorites-inner {
display: flex;
align-items: stretch;
margin-bottom: 10px;
}
.righFavorites-item-img {
max-width: 200px;
min-width: 200px;
}
.righFavorites-item-box {
padding: 10px 15px;
flex-grow: 1;
margin-bottom: 20px;
}
.righFavorites-box-title{
font-size: 18px;
margin-bottom: 5px;
font-weight: 600;
display: inline-block;
max-width: 270px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.righFavorites-box-location {
display: inline-block;
max-width: 270px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.righFavorites-box-date {
padding-top: 5px;
}
.righFavorites-item-iqon a {
display: flex; /* Разместить иконки горизонтально */
flex-direction: column;
margin-left: auto; /* Поместить иконки вправо */
}
.righFavorites-itel-letter{
padding: 10px 10px;
background-color: var(--button-color);
color:var(--text-button-color);
border-radius: 6px;
}
.righFavorites-itel-trash{
background-color: var(--unique-button-color);
padding: 10px 10px;
color:var(--text-button-color);
border-radius: 6px;
margin-top: 10px;
}
.righFavorites-inner:hover{
color: var(--text-color);
}
@media (max-width: 575px) {
.righFavorites-box-location h5 {
display: inline-block;
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.righFavorites-box-title{
display: inline-block;
max-width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.righFavorites-item-iqon{
margin-left: 0px;
}
.righFavorites-box-title {
margin-bottom: 10px;
font-size: 18px;
font-weight: 500;
}
.righFavorites-item-box{
padding-right: 0px;
padding-left: 5px;
}
.righFavorites-item-img {
max-width: 160px;
min-width: 160px;
}
.righFavorites-inner {
display: flex;
line-height:16px;
}
}
.righFavorites-item-img,
.righFavorites-item-box,
.righFavorites-item-iqon {
display: inline-block;
vertical-align: top; /* Выравнивание по верхнему краю, чтобы избежать проблем с высотой */
}
<img src="https://habrastorage.org/webt/65/e4/8d/65e48dab1cc35279334796.png" alt="image"/>
<img src="https://habrastorage.org/webt/65/e4/8d/65e48db3ad700251131289.png" alt="image"/>
Простой
Средний
