При изменении масштаба страницы блоки съезжают друг на друга, текст тоже
Я новичок в этом деле, но я уверен такого быть не должно.
я прикреплю код ниже
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Valentines Day</title>
<link rel="stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="styles/ionicons.min.css">
</head>
<body>
<header>
<div class="float-clearing">
<nav>
<h6 id="logo-text">Valentines day </h6>
<ul id="main-nav">
<li><a href="#wishes-from-people">Wishes from people</a></li>
<li><a href="#feedback-section">Comments</a></li>
<li><a href="#contact-form">Festivals</a></li>
<li><a href="#festivals-section">About us</a></li>
</ul>
</nav>
<div class="header-text">
<h1 id="header-title">Give warmth to each other and be happy
<ion-icon name="balloon-outline"></ion-icon></h1>
<div id="header-buttons">
<a href="#" class="button-founder">Founder</a>
<a href="#" class="button-more">To learn more</a>
</div>
</div>
</header>
<section id="wishes-from-people">
<div>
<h2>Wishes from people</h2>
<p id="headline-text">Give love and you will be loved!!</p>
</div>
<div class="col-4">
<p><ion-icon class="features-icon" name="heart-outline"></ion-icon> Seyidova Dunguzel <ion-icon class="features-icon" name="heart-outline"></ion-icon><br>This is truly a magical day. In this world, it is important to find your person, because who else needs you besides him. Believe in fate, it will lead you to the right person at the right time, now make as many mistakes as you can and fall in love!!</p>
</div>
<div class="col-4">
<p><ion-icon class="features-icon" name="heart-outline"></ion-icon> Anastasia Chernaya <ion-icon class="features-icon" name="heart-outline"></ion-icon><br>I want to tell you only one thing: while you are young, try yourself in a variety of life situations. Youth - is a time for making mistakes, and if you have lost a person, do not be discouraged, look only for pluses always and everywhere. Happy holiday to you!!</p>
</div>
<div class="col-4">
<p><ion-icon class="features-icon" name="heart-outline"></ion-icon> Dasha Gordienko <ion-icon class="features-icon" name="heart-outline"></ion-icon><br>I have always been and remain strong and independent, but you must admit, girls, sometimes we need this strong male shoulder to make us feel like little girls. Pride is a bad quality. I advise you to get rid of it!</p>
</div>
</section>
<section id="festivals-section">
<h2>Our festivals will in next cities:</h2>
<div class="col-3">
<img src="image/kiyev.jpg">
<h3>Kiev</h3>
<div id="city-info">
<ion-icon class="citi-icon" name="navigate-outline"></ion-icon>
St.Academician Korolyov
</div>
<div id="city-info">
<ion-icon class="citi-icon" name="hourglass-outline"></ion-icon>
Start at 16:00 pm
</div>
<div class="city-info">
<ion-icon class="citi-icon" name="mail-outline"></ion-icon>
[email protected]
</div>
<div id="city-info">
<ion-icon class="citi-icon" name="phone-portrait-outline"></ion-icon>
+380955045350
</div>
</div>
<div class="col-3">
<img src="image/kharkiv.jpg">
<h3>Kharkiv</h3>
<div id="city-info">
<ion-icon class="citi-icon" name="navigate-outline"></ion-icon>
St.Academician Pavlova
</div>
<div id="city-info">
<ion-icon class="citi-icon" name="hourglass-outline"></ion-icon>
Start at 18:00 pm
</div>
<div class="city-info">
<ion-icon class="citi-icon" name="mail-outline"></ion-icon>
[email protected]
</div>
<div class="city-info">
<ion-icon class="citi-icon" name="phone-portrait-outline"></ion-icon>
+380955045351
</div>
</div>
<div class="col-3">
<img src="image/odessa.jpg">
<h3>Odessa</h3>
<div id="city-info">
<ion-icon class="citi-icon" name="navigate-outline"></ion-icon>
St.Academician Grigoria
</div>
<div class="city-info">
<ion-icon class="citi-icon" name="hourglass-outline"></ion-icon>
Start at 19:00 pm
</div>
<div class="city-info">
<ion-icon class="citi-icon" name="mail-outline"></ion-icon>
[email protected]
</div>
<div class="city-info">
<ion-icon class="citi-icon" name="phone-portrait-outline"></ion-icon>
+380955045352
</div>
</div>
<div class="col-3">
<img src="image/lviv.jpg">
<h3>Lviv</h3>
<div id="city-info">
<ion-icon class="citi-icon" name="navigate-outline"></ion-icon>
St.Akademika Yefremova
</div>
<div id="city-info">
<ion-icon class="citi-icon" name="hourglass-outline"></ion-icon>
Start at 17:00 pm
</div>
<div class="city-info">
<ion-icon class="citi-icon" name="mail-outline"></ion-icon>
[email protected]
</div>
<div class="city-info">
<ion-icon class="citi-icon" name="phone-portrait-outline"></ion-icon>
+380955045353
</div>
</div>
</section>
<section id="feedback-section">
<h2 id="maker">A few words from me and my friend</h2>
<div class="col-10">
<blockquote>
I once participated in such festivals. Here I met my wife. If something tells you that you need to do something, do it. The main thing is never regret it, you must believe in fate, just as I believed in it. Your soul mate is sure to go somewhere out there, just as lost on the path, with the same broken heart, but just as kind and beautiful.. Be happy, give warmth and love to your loved ones.<br>
(c) Dmitry Saltovsky
</blockquote>
</div>
<div class="col-10">
<blockquote>
You know, I have never been to such events. I met girls on the Internet, but it's better to meet in real life. I met on the Internet and came across to me like myself .. During the war, one found herself another, while the other, while I thought it was worth starting a relationship, corresponded with a bunch of others and flirted, or maybe something else ... A whore in general!<br>
(c) Bogdan Senyuk
</blockquote>
</div>
</section>
<section id="contact-form">
<div id="contact-form-section">
<h2 id="contact-header">If you go want to us at festival, written us</h2>
<div id="form-row">
<div class="col-6">
<label for="name">Name</label>
</div>
<div class="col-6">
<input type="text" name="name" id="name"placeholder="Enter your name">
</div>
<div class="col-6">
<label for="email">Email</label>
</div>
<div class="col-6">
<input type="text" name="email" id="email"placeholder="Enter your email">
</div>
<div class="col-6">
<label for="topic">Choose a theme</label>
</div>
<div class="col-6">
<select id="topic" name="topic">
<option value="feedback">Feedback</option>
<option value="question">Question</option>
<option value="Other">Other</option>
</select>
</div>
<div class="col-6">
<label for="text">Write text your letter</label>
</div>
<div class="col-6">
<textarea name="text" id="text"
placeholder="Enter your text"></textarea>
</div>
<div class="col-6">
<input type="submit" value="Send">
</div>
</div>
</div>
</section>
<footer id="footer-nav">
<div id="footer-text">
<p>All rights reserved</p>
<p>Age limit 14+</p>
</div>
</footer>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>Ответы (1 шт):
Автор решения: Дмитрий
→ Ссылка
Попробуйте сделать контейнер, а в него поместить классы свои
.wrapper {
position: relative;
display: block;
min-width: 960px;
min-height: 700px;
}