0
So im trying to copy the grailed add a listing website, now I’m just up to making my page responsive and have the grid elements stacked on top of one another when I reduce the screen size just like the grailed website (check photo)
I’ve tried creating a media query and playing around with a single grid template column but some of elements seem like they are still in a two-column grid. Sorry for being a noob.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<title>Micro components</title>
</head>
<body>
<header class="header">
<div class="first">
<img src="grailed.png" alt="" class="logo" />
<form action="">
<input type="text" placeholder="Search" class="search" />
<button type="submit">SEARCH</button>
</form>
</div>
<div class="second">
<a href="">SHOP</a>
<a href="">SELL</a>
<a href="">READ</a>
<a href="">FOR YOU</a>
<a href="">♥️</a>
</div>
</header>
<nav class="navbar">
<a href="">DESIGNERS</a>
<a href="">BROWSE BY CATEGORY⬇</a>
<a href="">SNEAKERS</a>
<a href="">FOOTWEAR</a>
<a href="">TOPS</a>
<a href="">OUTERWEAR</a>
<a href="">STAFF PICKS</a>
<a href="">COLLECTIONS</a>
<a href="">WOMENSWEAR</a>
</nav>
<!-- <div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div> -->
<form class="addListing">
<h2 class="add-heading" id="heading-one">Add a new listing</h2>
<h3 class="details-heading" id="heading-two">DETAILS</h3>
<select
class="category form-select"
id="categories"
name="Select category"
>
<option value="cat0">Select Category</option>
<option value="cat1">Tops</option>
<option value="cat2">Bottoms</option>
<option value="cat3">Outerwear</option>
<option value="cat4">Footwear</option>
<option value="cat5">Tailoring</option>
<option value="car6">Accessories</option>
</select>
<input
class="form-input item-name form-end"
id="name-item"
type="text"
placeholder="Item name"
required
/>
<select class="form-select" id="des-select" name="Select designer">
<option value="des0">Select Designer</option>
<option value="des1">Nike</option>
<option value="des2">Off-White</option>
<option value="des3">Givenchy</option>
<option value="des4">Adidas</option>
<option value="des5">Champion</option>
</select>
<input
class="form-input item-size form-end"
id="enter-size"
type="text"
placeholder="Enter Size"
/>
<div class="note" id="des-note">
<p class="note">
<em
><strong>Please select a designer from the drop down.</strong>
Please email<br />
help@grailed.com if the designer you are trying to add does not<br />
exist</em
>
</p>
</div>
<h3 id="color">COLOR</h3>
<input
id="des-color"
class="form-input form-start"
type="text"
placeholder='Designer color name, i.e."Frozen Yellow"'
/>
<h3 id="condition">CONDITION</h3>
<select
class="form-select"
id="conditio-select"
name="select condition"
id="condition"
>
<option value="none"></option>
<option value="new">New/Never Worn</option>
<option value="gently">Gently Used</option>
<option value="used">Used</option>
<option value="very worn">Very Worn</option>
</select>
<h3 id="desc">DESCRIPTION</h3>
<textarea
id="input-desc"
class="description"
placeholder="Retail Price, Condition, Measurements, Shipping Policy, Link to Retail Page, etc"
></textarea>
<h3 id="payment">PAYMENT</h3>
<h5 id="tips"><a href="">Pricing tips --></a></h5>
<input
id="input-price"
class="price form-input form-start"
type="number"
placeholder="Price (USD)"
/>
<h3 id="shipping">SHIPPING</h3>
<h5 id="ship-tips">
<a href="">Shipping tips --></a>
</h5>
<p class="shipping-desc" id="ship-desc">
Shipping costs are dependent on the service used as well as the
size/weight of the package and the destination. Most services have an
online tool for calculating the shipping costs in advance. Once a buyer
has paid, it is the seller's responsibility to complete and pay for the
shipment.
</p>
<div class="country">
<label for="U.S">United States</label>
<input type="text" placeholder="20" />
<input type="checkbox" />
</div>
<div class="second-col">
<label for="canada">Canada</label>
<input class="canada" type="text" placeholder="20" />
<input class="canada" type="checkbox" />
</div>
<div class="country">
<label for="UK">United Kingdom</label>
<input type="text" placeholder="30" />
<input type="checkbox" />
</div>
<div class="second-col">
<label for="europe">Europe</label>
<input class="europe" type="text" placeholder="30" />
<input class="europe" type="checkbox" />
</div>
<div class="country">
<label for="aus/nz">Australia/NZ</label>
<input type="text" placeholder="10" />
<input type="checkbox" />
</div>
<div class="second-col">
<label for="asia">Asia</label>
<input class="asia" type="text" placeholder="20" />
<input class="asia" type="checkbox" />
</div>
<div class="country">
<label for="other">Other</label>
<input type="text" placeholder="25" />
<input type="checkbox" />
</div>
<h3 class="photos-heading">PHOTOS</h3>
<div class="orig-grid">
<div class="images">
<div class="image-upload pic-one">
<label for="file-input">
<img class="pic-image" src="upload-image-big.png" alt="" />
</label>
<input id="file-input" type="file" />
</div>
<div class="image-upload top-row">
<label for="file-input">
<img src="upload-image.png" alt="" />
</label>
<input id="file-input" type="file" />
</div>
<div class="image-upload top-row">
<label for="file-input">
<img src="upload-image.png" alt="" />
</label>
<input id="file-input" type="file" />
</div>
<div class="image-upload top-row">
<label for="file-input">
<img src="upload-image.png" alt="" />
</label>
<input id="file-input" type="file" />
</div>
<div class="image-upload top-row">
<label for="file-input">
<img src="upload-image.png" alt="" />
</label>
<input id="file-input" type="file" />
</div>
<div class="image-upload bottom-row">
<label for="file-input">
<img src="upload-image.png" alt="" />
</label>
<input id="file-input" type="file" />
</div>
<div class="image-upload bottom-row">
<label for="file-input">
<img src="upload-image.png" alt="" />
</label>
<input id="file-input" type="file" />
</div>
<div class="image-upload bottom-row">
<label for="file-input">
<img src="upload-image.png" alt="" />
</label>
<input id="file-input" type="file" />
</div>
<div class="image-upload bottom-row">
<label for="file-input">
<img src="upload-image.png" alt="" />
</label>
<input id="file-input" type="file" />
</div>
</div>
</div>
<button class="publish" type="submit">PUBLISH</button>
</form>
<footer class="footer">
<div class="footer-links">
<a href="">ABOUT</a>
<a href="">HELP & FAQ</a>
<a href="">TERMS</a>
<a href="">ACCESSIBILITY</a>
<a href="">JOBS</a>
<a href="">IOS APP</a>
<a href="">ANDROID APP</a>
</div>
<div class="footer-socials">
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-facebook-official"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-youtube-play"></a>
<a href="#" class="fa fa-linkedin-square"></a>
<p class="copyright">Grailed © 2020</p>
</div>
</footer>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.first {
display: flex;
padding-right: 7rem;
}
.second {
display: flex;
padding-left: 7rem;
justify-content: space-between;
text-decoration: none;
}
.header {
padding-top: 1rem;
padding-bottom: 0.9rem;
width: 100%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
border-bottom: 0.1rem solid #eeeeee;
}
.logo {
height: 1.4rem;
width: 9rem;
margin-right: 1.5rem;
}
.search {
height: 2.3rem;
width: 29rem;
border: 0.1rem solid black;
}
.navbar {
display: flex;
padding-top: 4.1rem;
align-items: center;
justify-content: center;
border-bottom: 0.1rem solid #eeeeee;
color: black;
}
.header a,
.navbar a {
text-decoration: none;
font-size: 0.8rem;
font-weight: 560;
color: black;
}
.header a:hover,
.navbar a:hover {
color: blue;
}
.second a {
margin-right: 0.8rem;
margin-left: 0.8rem;
}
.navbar a {
margin-right: 1.7rem;
margin-left: 1.7rem;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
.line {
background-color: black;
height: 0.3rem;
width: 2rem;
margin: 0.1rem;
}
.addListing {
display: grid;
align-content: center;
justify-content: center;
align-items: center;
grid-template-columns: 28em 28rem;
margin-top: 2rem;
}
h3 {
grid-column: 1 / 3;
}
.item-name,
.item-size {
grid-column: 2/3;
}
.note {
grid-column: 1/2;
font-size: 0.7rem;
line-height: 2;
}
.addListing select,
.form-input {
height: 2.3rem;
width: 26rem;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.description {
grid-column: 1/3;
height: 9rem;
padding: 1.5rem;
font-size: 0.9rem;
}
.form-start {
justify-self: start;
}
.form-end {
justify-self: end;
}
#payment,
#shipping,
.price {
grid-column: 1/2;
}
#tips,
#ship-tips {
grid-column: 2/3;
justify-self: end;
font-weight: lighter;
}
#tips a,
#ship-tips a {
text-decoration: none;
color: blue;
}
.shipping-desc {
grid-column: 1/3;
font-size: 1rem;
line-height: 1.5;
}
label {
font-weight: 580;
}
.country,
.second-col {
display: flex;
justify-content: flex-end;
padding-bottom: 1rem;
padding-top: 1rem;
width: 26rem;
border-bottom: 0.1rem solid #eeeeee;
/* width: 26rem;
padding-bottom: 1rem;
padding-top: 1rem;
border-bottom: 0.1rem solid #eeeeee; */
}
.second-col {
/* moves second column to the end of the grid */
justify-self: end;
}
.country label,
.second-col label {
margin-right: auto;
align-self: center;
}
input[type="checkbox"] {
width: 2rem;
height: 2rem;
}
/* .country input {
height: 2.3rem;
margin-left: 3rem;
} */
/* .second-col {
display: flex;
justify-content: flex-end;
border-bottom: 0.1rem solid #eeeeee;
padding-bottom: 1rem;
padding-top: 1rem;
} */
.photos-heading {
padding-top: 2rem;
}
.image-upload > input {
display: none;
}
.orig-grid {
grid-column: 1/3;
padding-bottom: 1rem;
}
.images {
display: grid;
justify-items: stretch;
justify-content: stretch;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.pic-one {
grid-column: 1/3;
grid-row: 1/3;
}
.top-row {
justify-self: end;
}
.bottom-row {
align-self: end;
justify-self: right;
}
.publish {
grid-column: 1/3;
height: 4rem;
font-size: 1.5rem;
}
.footer {
display: flex;
padding-top: 2.5rem;
padding-bottom: 1.6rem;
justify-content: flex-end;
}
.footer-links {
display: flex;
margin-right: auto;
font-size: 0.8rem;
align-items: center;
}
.footer-links a,
.footer-socials a,
.footer-socials p {
margin-right: 0.8rem;
margin-left: 0.8rem;
text-decoration: none;
color: black;
}
.footer-socials {
display: flex;
align-items: center;
}
.copyright {
font-size: 0.8rem;
}
@media (max-width: 800px) {
.addListing {
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"heading-one"
"heading-two"
"categories"
"name-item"
"des-select"
"enter-size"
"des-note"
"color"
"des-color"
"condition"
"condition-select"
"desc"
"input-desc"
"payment"
"tips"
"input-price"
"shipping"
"ship-tips"
"ship-desc";
background-color: pink;
}
/* h3,
.item-name,
.item-size,
.note,
select,
.form-input,
.description,
#payment,
#shipping,
.price,
#tips,
#ship-tips,
.shipping-desc,
.country,
.publish {
grid-column: auto;
grid-row: auto;
} */
}