#html #css
Вопрос:
в то время как я создаю адаптивный сайт с загрузкой, я даю минимальную высоту 100 вч как для раздела «Главная страница», так и для раздела «О программе». это хорошо смотрится на большом экране, но для маленького экрана между разделом «Главная» и разделом «О программе» больше места. как я могу контролировать это пространство для маленького экрана? Я попытался использовать медиа-запросы, чтобы контролировать пространство между разделом «Главная страница» и разделом «О программе» для маленького экрана. Я не могу это исправить. так скажи мне, как это контролировать.
.row { display: flex !important; justify-content: flex-end !important; align-items: center; min-height: 100vh; } .first__para { font-size: 1.5rem; } .landing__btn { text-decoration: none; color: #0275d8; font-size: 1.5rem; } .landing__btn::after { content: ""; height: 2px; width: 0px; opacity: ; background: #0275d8; display: block; position: absolute; transition: .3s; } .landing__btn:hover::after { content: ""; height: 2px; width: 105px; background: #0275d8; display: block; position: absolute; transition: .3s; transform-origin: 0%; z-index: 10; } .about__head { color: #0275d8 } .about__para { font-size: 1.5rem; } .about__btn { text-decoration: none; color: #0275d8; font-size: 1.5rem; } .about__btn::after { content: ""; height: 2px; width: 0px; opacity: ; background: #0275d8; display: block; position: absolute; transition: .3s; } .about__btn:hover::after { content: ""; height: 2px; width: 130px; background: #0275d8; display: block; position: absolute; transition: .3s; transform-origin: 0%; z-index: 10; } lt;!--landing page--gt; lt;div class="container"gt; lt;div class="row"gt; lt;div class="col-12 col-md-12 col-lg-12"gt; lt;h1 class="text-primary"gt;the vollmondslt;/h1gt; lt;p class="first__para"gt;Businesses get blinded by the allure of a large subscription list, lt;brgt;but unengaged subscribers aren't just not interested in what you're sending, they're actually harming your deliverabilitylt;/pgt; lt;a href="#" class="landing__btn"gt;for morelt;spangt;lt;/spangt;lt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;!--landing-page--gt; lt;!--about--gt; lt;div class="container"gt; lt;div class="row"gt; lt;div class="col-12 col-lg-6"gt; lt;img src="https://cdni.iconscout.com/illustration/premium/thumb/startup-business-1460503-1234533.png" alt="marketting"gt; lt;/divgt; lt;div class="col-12 col-lg-6"gt; lt;h1 class="about__head"gt;aboutlt;/h1gt; lt;p class="about__para"gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nisi dicta voluptatem cumque eius, lt;brgt;facere veritatis beatae rerum maxime ea accusamus, cum dolore ipsam quasi fugiat sit ullam error quas!lt;/pgt; lt;p class="about__para"gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nisi dicta voluptatem cumque eius, lt;brgt;facere veritatis beatae rerum maxime ea accusamus, cum dolore ipsam quasi fugiat sit ullam error quas!lt;/pgt; lt;a href="#" class="about__btn"gt;learn morelt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;!--about--gt; Ответ №1:
Я рекомендую добавить некоторые CSS, которые увеличат маржу поверх дополнительных .container элементов (или любого класса, который вы им назовете), а затем медиа-запрос, чтобы удалить маржу, если вы хотите. Код ниже для справки
.row { display: flex !important; justify-content: flex-end !important; align-items: center; min-height: 100vh; } .first__para { font-size: 1.5rem; } .landing__btn { text-decoration: none; color: #0275d8; font-size: 1.5rem; } .landing__btn::after { content: ""; height: 2px; width: 0px; opacity: ; background: #0275d8; display: block; position: absolute; transition: .3s; } .landing__btn:hover::after { content: ""; height: 2px; width: 105px; background: #0275d8; display: block; position: absolute; transition: .3s; transform-origin: 0%; z-index: 10; } .about__head { color: #0275d8 } .about__para { font-size: 1.5rem; } .about__btn { text-decoration: none; color: #0275d8; font-size: 1.5rem; } .about__btn::after { content: ""; height: 2px; width: 0px; opacity: ; background: #0275d8; display: block; position: absolute; transition: .3s; } .about__btn:hover::after { content: ""; height: 2px; width: 130px; background: #0275d8; display: block; position: absolute; transition: .3s; transform-origin: 0%; z-index: 10; } /* New CSS */ .container .container { margin-top: 50px; } @media screen and (min-width: 768px) { .container .container { margin-top: 0; } } lt;!--landing page--gt; lt;div class="container"gt; lt;div class="row"gt; lt;div class="col-12 col-md-12 col-lg-12"gt; lt;h1 class="text-primary"gt;the vollmondslt;/h1gt; lt;p class="first__para"gt;Businesses get blinded by the allure of a large subscription list, lt;brgt;but unengaged subscribers aren't just not interested in what you're sending, they're actually harming your deliverabilitylt;/pgt; lt;a href="#" class="landing__btn"gt;for morelt;spangt;lt;/spangt;lt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;!--landing-page--gt; lt;!--about--gt; lt;div class="container"gt; lt;div class="row"gt; lt;div class="col-12 col-lg-6"gt; lt;img src="https://cdni.iconscout.com/illustration/premium/thumb/startup-business-1460503-1234533.png" alt="marketting"gt; lt;/divgt; lt;div class="col-12 col-lg-6"gt; lt;h1 class="about__head"gt;aboutlt;/h1gt; lt;p class="about__para"gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nisi dicta voluptatem cumque eius, lt;brgt;facere veritatis beatae rerum maxime ea accusamus, cum dolore ipsam quasi fugiat sit ullam error quas!lt;/pgt; lt;p class="about__para"gt;Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, nisi dicta voluptatem cumque eius, lt;brgt;facere veritatis beatae rerum maxime ea accusamus, cum dolore ipsam quasi fugiat sit ullam error quas!lt;/pgt; lt;a href="#" class="about__btn"gt;learn morelt;/agt; lt;/divgt; lt;/divgt; lt;/divgt; lt;!--about--gt;