Ответы Mail
Программирование
Android
C/C++
C#
iOS
Java
JavaScript
jQuery
SQL
Perl
PHP
Python
Веб-дизайн
Верстка, CSS, HTML, SVG
Системное администрирование
Другие языки и технологии
Лидеры категории
Лена-пена
М.И.
Y.Nine
•••
Искусственный Интеллект
Искусственный Интеллект
Искусственный Интеллект
При адаптиве половина картины пропадает. Попробовал указать размеры в процентах тоже самое.
Лот
(277),
на голосовании
8 месяцев назад
Голосование за лучший ответ
Дмитрий
(290)
9 месяцев назад
попробуйте использовать проценты вместо фиксированных значений
img {
width: 100%;
height: auto;
}
или попробуйте добавить max-width
img {
max-width: 100%;
}
img {
width: 100%;
height: auto;
}
или попробуйте добавить max-width
img {
max-width: 100%;
}
V̲i̲s̲t̲a̲s̲t̲e̲r̲
(264135)
9 месяцев назад
.header {
background-size: contain;
text-align: center;
background-repeat: no-repeat;
padding: 20px;
}
.header img {
width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
.nav__item {
font-size: 16px;
}
.button {
font-size: 16px;
}
.home__title {
font-size: 24px;
}
.home__subtitle {
font-size: 16px;
}
.button2 {
font-size: 20px;
}
}
Pool of Leads
Beauty>
Похожие вопросы
<div class="header" >
<a href="#" class="nav__logo">Pool of Leads <br> <span class="span__logo">Beauty</span> </a>
<div class="nav__menu">
<ul class="nav__list">
<li class="nav__item">Our Offers</li>
<li class="nav__item">Full Offer</li>
<li class="nav__item">Leads Offer</li>
</ul>
<a href="#" class="button"> Contact Us</a>
</div>
<div class="home">
<h2 class="home__title">Make Your <br> Clinic Thrive!</h2>
<h4 class="home__subtitle">Enhancing Your Clinic's Efficiency: We Manage <br>Your Appointments, You Focus on
Patient Care.</h4>
<a href="#" class="button2"> Join now</a>
</div>
</div>
CSS
.header {
position: relative;
aspect-ratio: 1920/1080;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-image: url(img/image\ 1.png);
}
.nav__list {
padding-top: 35px;
display: flex;
position: absolute;
column-gap: 60px;
margin-left: auto;
white-space: nowrap;
margin-left: 306px;
margin: 0 auto;
}
.nav__item {
color: var(--White, #FFF);
text-align: center;
font-family: Onest;
font-size: 20px;
font-weight: 400;
line-height: 150%;
}
h1 {
font-size: clamp(50px, 8vw, 100px);
}
.nav__menu {
display: flex;
justify-content: center;
}
.home {
position: relative;
margin: 197px 420px 428px 420px;
}
.home__title {
color: var(--White, #FFF);
text-align: center;
font-family: Syne;
font-size: clamp(28px, 2.821rem + 8vw, 140px);
font-weight: 700;
line-height: 90%;
margin: 0 auto;
}
.home__subtitle {
width: 620px;
color: var(--White, #FFF);
text-align: center;
font-family: Onest;
font-size: clamp(18px, 1rem + 2vw, 28px);
font-weight: 400;
line-height: 140%;
margin: 0 auto;
margin-top: 24px;
}
.button {
display: flex;
padding: 12px 40px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 50px;
border: 2px solid var(--White, #FFF);
position: relative;
color: var(--White, #FFF);
font-family: "Bricolage Grotesque";
font-size: 24px;
font-weight: 700;
line-height: 120%;
text-transform: capitalize;
margin-left: auto;
margin-top: 25px;
margin-right: 264px;
}
.button2 {
display: flex;
width: 387px;
padding: 16px 24px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 50px;
background: var(--Green-500, #5C7B60);
color: var(--White, #FFF);
font-family: Syne;
font-size: 32px;
font-weight: 700;
line-height: 120%;
text-transform: capitalize;
margin: 60px auto;
}