CSS Help for a project. Page needs to have a 'form' element that is 600px when the window-CodePudding

CSS Help for a project. Page needs to have a 'form' element that is 600px when the window is wider than 600px and is the width of the screen when the screen is less than 600px wide.

It seems to work when the screen is more that 600px, but will not stay the width of the screen when the screen shrinks below 600px.

.card {
  height: 335px;
  width: 344px;
  border: lightgrey;
  border-style: solid;
  margin-left: auto;
  margin-right: auto;
  font-family: Arial, Helvetica, sans-serif;
  transition: box-shadow;
}

.card:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

.card-body {
  padding: 16px;
  font-size: 11px;
  color: #232f34;
}

.card_image {
  width: 100%;
  height: 194px;
}

.person {
  height: 50px;
  border-radius: 40px;
  float: left;
  margin: 0 1rem;
}

.title {
  display: inline;
  color: #000;
  font-size: 22px;
  padding: 16px;
}

.secondary {
  color: #232f34;
  display: inline;
  padding: 16px;
}
.myform {
  max-width: 600px;
}

@media screen {
  nav {
    position: static;
    height: auto;
  }
}
@media screen and (min-width: 600px) {
  form {
    display: grid;
    grid-template-columns: 600px;
  }
}

<form method="post" action="/pets">
  <label for="name">Name</label>
  <input name="pet_name" id="name" type="text" />
  <br>
  <label for="type">Type</label>
  <select name="pet_type" id="type">
    <option value="Cat">Cat</option>
    <option value="Dog">Dog</option>
    <option value="Hamster">Hamster</option>
    <option value="Other">Other</option>
    <option value="Zebra">Zebra</option>
  </select>
  <br>

  <label for="bio">Biography</label>
  <textarea name="pet_bio" id="bio"></textarea>
  <br>

  <label for="owner-email">Owner's Email</label>
  <input name="pet_owner_email" id="owner-email" type="text" />
  <br>

  <button  type="submit">
    Create new pet
  </button>

  <button  type="reset">Reset</button>

  <form class='myform'>
    My form!
  </form>

</form>
<br>
<br>
<div >
  <img src="images/desert.jpg" id="desert" >
  <img src="images/person-avatar.jpg" >
  <h1 >Title goes here</h1>
  <h3 >Secondary text</h3>
  <p > Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>

CodePudding user response：

To make a form element have a width of 600px when the window is wider than 600px, you can use a media query in your CSS: This media query will apply the styles inside it only when the viewport width is greater than or equal to 600px. To make the form element have a different width when the window is less than 600px wide, you can use another media query:

CodePudding user response：

You don't need a media query for that. Just use max-width.

body {
  margin: 0;
}

.myform {
  border: 1px solid blue;
  margin-inline: auto;
  padding: 1rem;
  
  /* here's where the magic happens */
  max-width: 600px;
}

<form class = 'myform'>
  My form!
</form>

Edited to add If the behaviour when the screen is greater than 600px is the one you want then set the grid element to max-width: 600px and set the grid-template-columns to 1fr as below. I also made the margins to the left and right auto to centre the form alongside your card.

document.getElementsByTagName("h1")[0].style.fontSize = "6vw";

.card {
  height: 335px;
  width: 344px;
  border: lightgrey;
  border-style: solid;
  margin-left: auto;
  margin-right: auto;
  font-family: Arial, Helvetica, sans-serif;
  transition: box-shadow;
}

.card:hover {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

.card-body {
  padding: 16px;
  font-size: 11px;
  color: #232f34;
}

.card_image {
  width: 100%;
  height: 194px;
}

.person {
  height: 50px;
  border-radius: 40px;
  float: left;
  margin: 0 1rem;
}

.title {
  display: inline;
  color: #000;
  font-size: 22px;
  padding: 16px;
}

.secondary {
  color: #232f34;
  display: inline;
  padding: 16px;
}

/* got rid of the media query and added this */
form {
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 600px;
}

<form method="post" action="/pets">
  <label for="name">Name</label>
  <input name="pet_name" id="name" type="text" />
  <br>
  <label for="type">Type</label>
  <select name="pet_type" id="type">
    <option value="Cat">Cat</option>
    <option value="Dog">Dog</option>
    <option value="Hamster">Hamster</option>
    <option value="Other">Other</option>
    <option value="Zebra">Zebra</option>
  </select>
  <br>

  <label for="bio">Biography</label>
  <textarea name="pet_bio" id="bio"></textarea>
  <br>

  <label for="owner-email">Owner's Email</label>
  <input name="pet_owner_email" id="owner-email" type="text" />
  <br>

  <button  type="submit">
    Create new pet
  </button>

  <button  type="reset">Reset</button>
</form>
<br>
<br>
<div >
  <img src="https://picsum.photos/id/46/200/300" id="desert" >
  <img src="https://picsum.photos/id/64/200/300" >
  <h1 >Title goes here</h1>
  <h3 >Secondary text</h3>
  <p > Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>