@newfolder_js

Насколько правильно указан этот код (относительно к width)?

65fdcb3a0168a217521365.pngправильно ли указан код. внизу результат этого кода, а сверху как он должен выглядит. мне кажется такой способ усложняет показ страницы. пхж слишком затруднил. может есть простой код который выдасть такой же результат. а еще насколько правильно указать длину процентом
<div class="review-container">
    <div class="gorizontal-box"></div>
    <div class="text-review">
        <p style="font-size: 16px">Guest Reviews</p>
        <p style="font-size: 16px">"AENEAN SOLLICITUDIN, LOREM QUIS BIBENDUM AUCTOR, NISI ELIT CONSEQUAT IPSUM, NEC SAGITTIS SEM NIBH ID ELIT. DUIS SED ODIO SIT AMET NIBH VULPUTATE CURSUS A SIT AMET MAURIS. MORBI ACCUMSAN IPSUM</p>
        <p style="font-size: 16px">Lesley Greenman, Australia</p>
    </div>
    <div class="vertical-box"></div>
</div>
.review-container {
    width: 100%;
    height: 500px;
    margin-top: 40px;
    background-color: aqua;
    display: flex; /* Используем flexbox для выравнивания дочерних элементов */
    position: relative; /* Добавим позиционирование для корректного расположения внутренних элементов */
}

.text-review {
    height: 100%;
    width: 30%;
    background-color: yellow;
    overflow: hidden; 
    padding: 20px 50px;
    box-sizing: border-box; 
}


.gorizontal-box {
    height: 100%;
    width: 50%; 
    background-color: red;
    background-image: url('../assets/picone.jpg'); 
    background-size: cover; 
}

.vertical-box {
    height: 100%;
    width: 20%; 
    background-color: chartreuse;
    background-image: url('../assets/pictwo1.jpg'); 
    background-size: cover; 
}

@media (max-width: 768px) {
    .text-review, .gorizontal-box, .vertical-box {
        width: 100%; 
    }
}
  • Вопрос задан
  • 121 просмотр
Решения вопроса 1
vhood
@vhood
Не забывайте отмечать решения
Во-первых, нужен класс для p вместо <p style="font-size: 16px">

Во-вторых, если
внизу результат, а сверху как должно быть
то очевидно, что картинка справа шире, чем должна быть.

В-третьих,
насколько правильно указать ширину(width) процентом
вполне обычная практика

В-четверых,
часть текста невидно в мобильной версии
@media запросы или значения типа font-size: max(30vw, 30px) в помощь
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы