Блог

Главная - Вопросы по программированию - Как разместить увеличенный h1 в div без перекрытия текста?

Как разместить увеличенный h1 в div без перекрытия текста?

#html #css #responsive-design #responsive

Вопрос:

Я пытался создать адаптивный макет для своего тега h1. Он отлично работает , когда я его не меняю font-size , но как только я увеличиваю размер шрифта, текст перекрывается background-image после уменьшения размера окна. Есть ли решение для решения этой проблемы?

Вот мой код:

 body {
    margin: 0;
    padding: 0;
    background-color: orangered;
}

.main-page-font {
    background-image: linear-gradient(to left, blue, grey);
    padding: 16em 10em;
    background-size: cover;
}

.headers h1,
.headers h3 {
    color: azure;
}

.headers h1 {
    font-size: 8.5em;
} 
 <body>

    <div class="main-page-font">
        <div class="headers">
            <h1>This is a long header for this page</h1>
            <h3>Fit me within this space please</h3>
        </div>
    </div>

</body>

Ответ №1:

Что бы я сделал, чтобы решить вашу проблему, это изменил файл CSS на этот и проверил результат на разных размерах экрана:

  1. Укажите body высоту, которую позже можно будет изменить, когда вы добавите больше элементов в свой HTML-файл
  2. Укажите main-page-font ширину и высоту для инкапсуляции заголовков и предотвращения переполнения
  3. Дайте main-page-font display: inline-block; , чтобы он не занимал лишнее нежелательное пространство
 body {
    margin: 0;
    padding: 0;
    background-color: orangered;

    height: 100vh;
}

.main-page-font {
    background-image: linear-gradient(to left, blue, grey);
    width: fit-content;
    height: fit-content;
    display: inline-block;
    background-size: cover;
}

.headers h1,
.headers h3 {
    color: azure;
}

h1 {
    font-size: 15em;
} 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="1.css">
    <title>Document</title>
</head>
<body>
    <div class="main-page-font">
        <div class="headers">
            <h1>This is a long header for this page</h1>
            <h3>Fit me within this space please</h3>
        </div>
    </div>
</body>
</html>

Надеюсь, это решит вашу проблему!

Комментарии:

1. Спасибо, Эндрю. Я дал контейнеру ширину (в %) 80%, а дочернему элементу дал еще одну ширину 100% (которая в основном покрывает 100% ширины его родителя). Это отлично сработало для меня.

Метки: