Witam,
Problem przedstawia się następująco.
Mam div description-div jest on podzielony gridem na 2 kolumny i 3 wiersze i chciał bym by przy szerokości 550px robiła się z niego 1 kolumna i usuwały się obrazki które były w jednej kolumnie.
Szukałem rozwiązania tego problemu ale nie mogę sobie z tym poradzić.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/master.css" type="text/css">
</head>
<body>
<header id="header">
<img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="Logo" id="header-img">
<nav id="nav-bar">
<ul>
<li><a href="" class="nav-link">Features</a></li>
<li><a href="" class="nav-link">How It Works</a></li>
<li><a href="" class="nav-link">Pricing</a></li>
</ul>
</nav>
</header>
<div id="container">
<div id="form-div">
<h1>Handcrafted, home-made masterpieces</h1>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<label>
<input type="email" id="email" placeholder="Enter your email" required>
</label>
<label>
<input type="submit" id="submit">
</label>
</form>
</div>
<div id="description-div">
<div id="img1"><img src="https://image.flaticon.com/icons/png/512/2331/2331758.png" alt="Ikona" class="icon"></div>
<div id="desc-div1">
<h3 class="descHeader">Premium Materials</h3>
<p class="descText">
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div id="img2"><img src="https://image.flaticon.com/icons/png/512/2331/2331701.png" alt="Ikona" class="icon"></div>
<div id="desc-div2">
<h3 class="descHeader">Fast Shipping</h3>
<p class="descText">
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div id="img3"><img src="https://image.flaticon.com/icons/png/512/2331/2331804.png" alt="Ikona" class="icon"></div>
<div id="desc-div3">
<h3 class="descHeader">Quality Assurance</h3>
<p class="descText">
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument
</p>
</div>
</div>
<div id="video-div">
</div>
<div id="options-div">
</div>
<div id="footer-div">
</div>
</div>
</body>
</html>
body
{
margin: 0;
padding: 0;
}
div#container
{
display: grid;
grid-template-areas:
". email ."
". description ."
". video ."
". options ."
". footer .";
position: relative;
grid-template-columns: auto minmax(400px, 1000px) auto;
grid-template-rows:200px max-content 200px 200px 200px;
height: 2000px;
margin-top: 75px;
}
li
{
list-style: none;
}
header#header
{
position: fixed;
top: 0;
min-height: 75px;
display: flex;
z-index: 100;
flex-direction: row;
justify-content: space-around;
align-items: center;
background-color: gray;
width: 100%;
}
img#header-img
{
width: 300px;
height: 50px;
}
nav > ul
{
display: flex;
flex-direction: row;
justify-content: space-around;
width: 35vw;
}
@media(max-width: 700px)
{
div#container
{
margin-top: 99px;
}
nav > ul
{
flex-direction: column;
align-items: center;
}
li
{
padding-bottom: 5px;
}
}
@media(max-width: 550px)
{
div#description-div
{
<!-- to nie działa chrome w zbadaj wykreśla wszystko, a div staje się 2x2-->
grid-template-areas:
"text1"
"text2"
"text3";
grid-template-columns: minmax(400px, 550px);
}
div#container
{
margin-top: 149px;
}
header#header
{
flex-direction: column;
}
li
{
padding-bottom: 5px;
}
div#img1
{
display: none;
}
div#img2
{
display: none;
}
div#img3
{
display: none;
}
}
a:link, a:visited, a:active, a:hover
{
text-decoration: none;
font-size: 25px;
color: black;
}
div#form-div
{
display: flex;
flex-direction: column;
align-items: center;
grid-area: email;
margin-left: auto;
margin-right: auto;
}
div#description-div
{
grid-area: description;
display: grid;
padding: 0;
grid-template-areas:
"icon1 text1"
"icon2 text2"
"icon3 text3";
grid-template-columns: minmax(100px, 200px) minmax(400px, 900px);
grid-template-rows: max-content max-content max-content;
}
div#video-div
{
grid-area: video;
}
div#options-div
{
grid-area: options;
}
div#footer-div
{
grid-area: footer;
}
form#form
{
display: flex;
flex-direction: column;
align-items: center;
}
label
{
margin-bottom: 10px;
}
input[type=submit]
{
border-style: none;
background-color: yellow;
color: black;
font-weight: bold;
font-size: 20px;
height: 40px;
width: 100px;
}
input[type=email]
{
height: 30px;
padding-left: 5px;
padding-right: 5px;
}
h1
{
text-align: center;
}
div#desc-div1
{
grid-area: text1;
}
div#desc-div3
{
grid-area: text2;
}
div#desc-div3
{
grid-area: text3;
}
div#img1
{
grid-area: icon1;
}
div#img2
{
grid-area: icon2;
}
div#img3
{
grid-area: icon3;
}
img.icon
{
height: 100px;
width: 100px;
}
h3.descHeader
{
margin: 0;
}
p.descText
{
margin: 0;
}