#html #css #flexbox #responsive-design
#HTML #css #flexbox #отзывчивый дизайн
Вопрос:
Извините, что буду отправлять много кода, но это мой второй дизайн, так что я действительно новичок. Поэтому я не мог разделить код. Потому что, возможно, ошибка может быть где-то, чего я сейчас не вижу.
Проблема в том, что тексты в моем первом поле не сужаются, когда я сужаю страницу.
Я не вижу проблемы. Два других поля в порядке, но что отличается в первом поле? Это поле проблематично 🙂 Мне пришлось добавить еще одно правило поля для этого поля.
это мой HTML,
<body>
<div class="container">
<header class="header">
<h1 id="title" class="head-text">Funny Survey</h1>
<p id="description" class="description head-text">Do not take this form seriously, but it is highly recommended that you answer the questions anyway.amp;#128540</p>
</header>
<form id="survey-form">
<div class="boxes">
<div class="box1">
<div class="name">
<label id="name-label" for="name">Name</label>
<input type="text" name="name" id="name" class="name" placeholder="Enter your name" required />
</div>
<div class="email">
<label id="email-label" for="email">Email</label>
<input type="email" name="email" id="email" class="email" placeholder="Enter your email" required />
</div>
<div class="state-of-mind">
<p>If age is only a state of mind, which category best describes your state of mind right now?</p>
<select id="dropdown" name="age-drop" class="state-of-mind" required>
<option disabled selected value>Select your state of mind</option>
<option value="child">Cheeky Child 👶</option>
<option value="teenager">Tormented Teenager👦</option>
<option value="mid-age">Mad Mid-Lifer👱♀️</option>
<option value="old">Groovy Grandparent👵</option>
<option value="other">Other👽</option>
</select>
</div>
</div>
<div class="box2">
<div class="number">
<label id="number-label" for="number">I am an odd number. Take away one letter and I become even. What number am I?</label>
<input type="number" name="odd" id="number" min="6" max="8" class="number" placeholder="?" />
</div>
<div class="dog-cat">
<p>Are you a dog person, or a cat person?</p>
<label>
<input name="dog-cat" value="dog" type="radio" checked />Dog🐶
</label>
<label>
<input name="dog-cat" value="cat" type="radio" />Cat 🐱
</label>
<label>
<input name="dog-cat" value="not-sure" type="radio" />Not sure 😕
</label>
<div class="superpower">
<p>Which superpower would you like to have?
<span class="clue">(Check all that apply)</span></p>
<label>
<input name="superpower" type="checkbox" value="mind-read">Mind Reading
</label>
<label>
<input name="superpower" type="checkbox" value="invisibility">Invisibility
</label>
<label>
<input name="superpower" type="checkbox" value="teleportation">Teleportation
</label>
<label>
<input name="superpower" type="checkbox" value="Flying">Flying
</label>
<label>
<input name="superpower" type="checkbox" value="have-superpower">I have already a superpower
</label>
</div>
</div>
</div>
<div class="box3">
<div class="tech">
<p>What’s the best tech invention of the 21st Century?</p>
<textarea id="invention" class="tech" name="inventions" placeholder="Enter your comment here..." rows="15" style="width: 100%;
box-shadow: 1px 1px 2px #888888 inset;
background-color: var(--background);"></textarea>
</div>
</div>
</div>
<div class="submit-container">
<button type="submit" id="submit" class="submit-button">
Submit 👍
</button>
</div>
</form>
</div>
</body>
</html>
И это CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,500amp;display=swap');
:root {
--background: #E4E4E4;
--box-color: #1e121e;
--color-text: #FEFEFE;
--color-text-hover: #ad3e46;
--header-text: #D9414B;
--main-font: 'Montserrat', sans-serif;
--border-color: #a5a5a5;
}
* {
box-sizing: border-box;
}
body {
background-color: var(--background);
font-family: var(--main-font);
}
.container {
margin-top: 2em;
max-width: 100%;
height: 100%;
color: #b8353d;
}
.header {
display: flex;
max-width: 100%;
flex-flow: column;
padding: 15px;
border-style: dotted;
border-image: url('https://sourceofmine.weebly.com/uploads/1/1/9/8/119868229/form_orig.png') 125 / 19px round;
font-size: 15px;
text-shadow: 2px 2px 6px;
text-align: center;
}
#title {
font-size: 40px;
}
.boxes {
display: flex;
flex-flow: row;
max-width: 100%;
margin-top: 8em;
margin-left: 2em;
margin-right: 2em;
padding: 1em;
height: 100%;
}
.box1,
.box2,
.box3 {
display: flex;
flex-flow: column;
align-items: flex-start;
max-width: 30%;
background-color: var(--box-color);
color: var(--color-text);
font-size: 1em;
margin: 1em;
padding: 1.5em;
border-radius: 9px;
box-shadow: 10px 8px 6px #5e4464;
transform: rotate(7deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@media only screen and (max-width: 700px) {
.boxes {
display: flex;
flex-flow: column;
}
.box1,
.box2,
.box3 {
font-size: 0.9em;
}
}
.boxes :hover {
transform: rotate(0deg);
color: #D9414B;
}
.email,
.name,
.state-of-mind {
margin-bottom: 1em;
font-family: var(--main-font);
}
.name::placeholder,
.email::placeholder,
.number::placeholder,
.tech::placeholder {
font-family: 'Montserrat', sans-serif;
}
.dog-cat,
.superpower,
.number {
display: flex;
flex-flow: column;
}
.submit-container {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
.submit-button {
width: 250px;
align-self: center;
color: #FEFEFE;
margin: 10px;
padding: 10px;
font-size: 17px;
font-family: var(--main-font);
cursor: pointer;
z-index: 0;
border-radius: 15px;
position: relative;
}
.submit-button::before {
content: "";
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -5px;
right: -5px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% 6px);
height: calc(100% 6px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.submit-button:active {
color: rgb(0, 0, 0);
font-weight: bolder;
}
.submit-button:active:after {
background: transparent;
}
.submit-button:hover:before {
opacity: 1;
}
.submit-button:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: var(--box-color);
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
Ответ №1:
Итак, проблема в том, что содержимое внутри контейнера не имеет CSS, указывающего, какой ширины оно должно быть.
Чтобы устранить проблему, вам нужно указать, чтобы все элементы внутри контейнера имели ширину 100%, что означает «заполнить родительский элемент». Похоже, у вас уже есть место в CSS, где вы можете это сделать.
В строке 93 вашего css у вас есть:
.email,
.name,
.state-of-mind {
margin-bottom: 1em;
font-family: var(--main-font);
width: 100%; /* add this line */
}
Добавьте туда эту последнюю строку, и это должно вам немного помочь.
Кстати, старайтесь не использовать так много классов и разделов, это делает ваш код немного чище и помогает легче находить проблемы, когда происходят подобные вещи: D
Комментарии:
1. Через два часа это, наконец, решило мою проблему. Да, вы правы, я использовал слишком много divs. Я обязательно напишу свои будущие коды более эффективными 🙂 Большое вам спасибо
Ответ №2:
Вы пробовали добавлять медиа-запросы и изменять отступы или размер текста по мере уменьшения поля. Это должно сработать. Посмотрите на эти примеры: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Комментарии:
1. да, я пробовал их. Но это не сработало. Я думаю, проблема в том, что ширина текста ограничена шириной выпадающего меню. Но я не смог найти способ сузить его.