@pologenki

При добавлении к иконки i элемента a (ссылка) все ломается?

При добавлении к иконки 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"/>
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы