Я разработал веб-сайт для мобильных устройств и использовал медиазапрос, чтобы при развертывании экрана две колонки располагались рядом друг с другом. Вместо этого он сделал сетку на моей мобильной версии и У меня есть пробел в нижней части версии планшета
Если я переключу мин на максимум, он просто перейдет к моему Дизайн для мобильных устройств игнорирует медиазапрос CSS Сетка (как и ожидалось) для планшета и настольной версии
@media (min-width: 600px) {
.authentic {
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-areas: 'bowl content';
height: 100%;
margin: 0px;
}
.right-col {
grid-area: content;
padding: 0 10%;
text-align: left;
align-self: center;
}
}
Вот HTML, если это поможет
<section class="authentic">
<div class="right-col">
<h2>Authentic. Awesome.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque aliquam id ullam vel quia voluptatem nobis nisi error nihil saepe!</p>
</div>
<img src="images/dumpling.jpeg" alt="Dumplings in a bowl" />
</section>
Здесь полный код HTML и CSS для полной ссылки:
HTML
<!doctype html>
<!-- Fun project to help me learn responsive layout design -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Yummy Eats</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="hero-bg">
<section class="top">
<header>
<a href="#">yummy.eats</a>
</header>
<h1><span>The Healthy </span> Eating Experience</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eius impedit porro similique officiis
eligendi, asperiores maxime est praesentium libero.</p>
<div class="form-container">
<form action="">
<div class="form-left">
<label for="city">Enter your city:</label>
<input type="text" name="city" id="city">
<p>Example: "San Diego"</p>
</div>
<input type="button" value="Find Food Now">
</form>
</div>
</section>
</div>
<section class="authentic">
<div class="right-col">
<h2> Authentic. Awesome.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque aliquam id ullam vel quia voluptatem
nobis nisi error nihil saepe!</p>
</div>
<img src="images/dumpling.jpeg" alt="Dumplings in a bowl" />
</section>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
/*Margin affects outside. Padding affects inside */
/*Custom Properties */
:root {
--leading: 2em;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
.hero-bg {
background: #307D99 url('images/bg.jpg');
color: white;
text-align: center;
padding-bottom: 4em;
padding-top: 1em;
/* for margin and padding its good to use em */
}
header {
padding: 1em 5em 3em 10em;
}
.hero-bg a {
color: white;
text-decoration: none;
/* ^^this removes url underlining */
font-weight: bold;
font-size: 1.2rem;
/*for text we use rem */
}
section {
margin: 0 1em;
}
h1 {
font-size: 2.5rem;
margin: 2em 0 1.2em;
}
h1 span {
text-transform: uppercase;
display: block;
/* display:block puts things on their own line, nothing is on the right or left to it */
font-size: 1.4rem;
position: relative;
z-index: 1;
}
h1 span::before {
content: ' ';
position: absolute;
width: 3em;
background: #00BFFF;
height: .4em;
bottom: 0;
z-index: -1;
margin-left: -.3em;
}
.hero-bg p {
font-weight: bold;
margin: 0 1em 3em;
/* font-size: .759rem; */
}
.form-container {
background-color: white;
margin: 2em -1em 0;
padding: 2em;
}
label {
color: #2D7D98;
font-weight: bold;
display: block;
margin-bottom: 1em;
font-size: 1.2em;
}
input[type=text] {
border: 1px solid #707070;
width: 100%;
padding: 1em;
border-radius: .5em;
margin-top: 1.2em;
box-sizing: border-box;
}
.form-container p {
color: gray;
margin-bottom: 1.5em;
font-weight: normal;
font-size: .9em;
margin-top: .3em;
}
input[type=button] {
background-color: #F89104;
border: none;
width: 100%;
color: white;
font-weight: bold;
padding: 1em 0;
border-radius: .5em;
font-size: 1.3em;
cursor: pointer;
}
input[type=button]:hover {
background-color: #bb690a;
}
.authentic {
margin: 0;
}
.right-col {
text-align: center;
margin: 3em 1em;
}
h2 {
text-transform: uppercase;
position: relative;
}
h2::before {
content: ' ';
position: absolute;
width: 8em;
background: #00BFFF;
height: .4em;
bottom: 0;
z-index: -1;
margin-left: -.3em;
}
img {
width: 100%;
/* this is super important if you are using images to get your website to fit the entire page */
}
p {
line-height: var(--leading);
}
/* Media query put in place to change the width for the section (form) when the user enlarges the screen into desktop format */
@media (min-width: 730px) {
section {
margin: 0 4em;
}
.form-container {
margin: 2em 4em 0;
}
}
@media (min-width: 600px) {
.hero-bg {
text-align: left;
}
.hero-bg p {
margin: 0 0 3em;
}
.hero-bg section {
width: 65%;
}
.form-container {
margin: 2em 0 0;
padding: 2em;
border-radius: .5em;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
}
form {
display: flex;
}
.form-left {
width: 70%;
}
label {
margin: 0;
}
input[type="button"] {
height: fit-content;
font-size: 1.1em;
margin-left: 1em;
margin-top: 2.2em;
padding: .7em 0;
width: 30%;
}
/* CSS Grid Usage: put the text and bowl next to each other and then changed the order by putting the bowl on the left
since it came before content in grid-template-areas */
.hero-bg p {
margin-bottom: 0px;
}
.authentic {
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-areas: "bowl content";
height: 100%;
margin: 0px;
}
.right-col {
grid-area: content;
padding: 0 10%;
text-align: left;
align-self: center;
}
img {
grid-area: bowl;
}
h2 {
margin: 0;
}
}
/* A fadeIn effect for the top section */
.top {
animation: fadeIn 4s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-2em);
}
to {
opacity: 1;
transform: translateY(-2em);
}
@keyframes overlay {
0% {
opacity: 0;
}
30% {
1;
}
70% {
1;
}
100% {
0;
}
}
}