Before I declared display: grid on my <aside> sidebar (inside the @media (min-width: 600px) query), the content would still shrink as I dragged the sides of my browser window to make it smaller.
But once I declare display: grid, it no longer shrinks.
Are there additional properties that I need to set? And for which attributes?
Here is a screenshot of the problem I am trying to share.
* {
box-sizing: border-box;
font-family: century gothic;
}
#contact-page {
width: 80%;
margin: auto;
border: 2px solid gray;
display: grid;
grid-template-columns: 1fr;
grid-gap: 25px;
}
#side-bar {
background: #CFA5D7;
padding: 20px;
color: #FFE3EF;
width: 100%;
}
ul {
margin: 0;
padding: 0;
text-align: center;
list-style-type: none;
}
a {
text-decoration: none;
color: #FFE3EF;
}
#moeru {
max-width: 100%;
border-bottom: 2px solid #FFE3EF;
}
#message-form {
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
}
.form-group {
display: grid;
}
.form-group input,
#submit {
width: 100%;
height: 30px;
}
.form-group label {
width: 100%;
align-self: end;
}
.form-whole-width {
grid-column: 1/3
}
#message {
max-width: 100%;
min-width: 100%;
width: 100%;
height: 100px;
}
label {
margin-bottom: 5px;
}
@media (min-width: 600px) {
#contact-page {
width: 80%;
margin: auto;
border: 2px solid gray;
display: grid;
grid-template-columns: 30% 1fr;
grid-gap: 25px;
}
#side-bar {
background: #CFA5D7;
padding: 20px;
color: #FFE3EF;
display: grid;
grid-template-columns: 1fr;
}
ul {
margin: 0;
padding: 0;
text-align: center;
list-style-type: none;
}
a {
text-decoration: none;
color: #FFE3EF;
}
#moeru {
max-width: 100%;
width: 100%;
border-bottom: 2px solid #FFE3EF;
}
#message-form {
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 15px;
}
.form-group {
display: grid;
}
.form-group input,
#submit {
width: 100%;
height: 30px;
}
.form-group label {
width: 100%;
align-self: end;
}
.form-whole-width {
grid-column: 1/3
}
#message {
max-width: 100%;
min-width: 100%;
width: 100%;
height: 100px;
}
label {
margin-bottom: 5px;
}
}<!DOCTYPE html>
<html>
<head>
<title>Contact Form with Grid</title>
<link rel="stylesheet" type="text/css" href="contact.css">
</head>
<body>
<main id="contact-page">
<aside id="side-bar">
<img src="https://scontent.fmnl9-1.fna.fbcdn.net/v/t1.0-9/117642520_2687382111527878_668441420531344703_n.png?_nc_cat=104&ccb=1-3&_nc_sid=09cbfe&_nc_eui2=AeGeIeqT_nRIcbj9bsBkEmOokF65t-hNn8CQXrm36E2fwDd8FpSrtY1kN-tyqglYXMSeh5Y_-hSoM7i3CoW-l9iq&_nc_ohc=AWVq1gO2ATYAX-3W0KM&_nc_ht=scontent.fmnl9-1.fna&oh=0c19981f3ddef215e4a72806a6a1e8dc&oe=606EE8EE"
id="moeru" alt="Logo">
<div>
<h2>
<center>Company Name</center>
</h2>
<ul id="contact-info">
<li><a href="#">Facebook Page</a></li>
<li><a href="#">_ on Tumblr</a></li>
<li><a href="#">Call or text: #####</a></li>
<li><a href="#@gmail.com">#@gmail.com</a></li>
</ul>
</div>
</aside>
<form id="message-form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div class="form-group">
<label for="skype">Skype</label>
<input type="text" name="skype" id="skype">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" id="email">
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" name="Subject" id="subject">
</div>
<div class="form-whole-width">
<label for="message">Write your message</label>
<textarea id="message"></textarea>
</div>
<div class="form-whole-width">
<input type="submit" name="submit" id="submit">
</div>
</form>
</main>
</body>
</html>