Why isnt my CSS grid responding to my html? [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am attempting to use CSS grid (orderForm.css below) however the css styling is not responding to the html that i have written. I have found a lot of times I am not calling the element correctly due to nesting of divs. I was hoping you all could look at my code and tell me what is going on. Some pages it works in visual studios and some pages do not work.
/* Skeleton of pages below */
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(4, 1fr);
}
nav#original.navigation,
h1 {
grid-column: 4 / 10;
grid-row: 1 / 2;
text-align: center;
}
/* Fix the images, not correctly displaying */
div.blackLogo {
grid-column: 1 / 4;
grid-row: 1 / 2;
image-resolution: from-image 300dpi;
}
div.pinkLogo {
grid-column: 10 / 13;
grid-row: 1 / 2;
}
ul li {
display: inline;
list-style: none;
}
/* Footer not responding to grid dimensons */
footer {
grid-column: 1 / 13;
grid-row: 4 / 5;
text-align: center;
}
h1 {
padding: 10px;
}
/* div#all.container {
grid-column: 1/13 ;
grid-row: 2/3;
} */
/* div#name.container, div#billing-address.container,div#mailing-address.container {
display: inline;
grid-column: 1 / 7;
grid-row: 2 / 4;
}*/
body>div.grid-container>div#partOne.container {
grid-column: 1 / 7;
grid-row: 2 / 4;
}
/* columns not running span of grid-column dimensions */
div#partTwo.container {
grid-column: 7 / 13;
grid-row: 2 / 4;
}
/* div#product-choice.container >h2#product-Choice.heading {
text-align: center;
} */
/* div#partTwo.container > div#product-choice.container > h2#product-choice.heading {
grid-column: 7 / 13;
grid-row: 2 / 4;
} */
<div class="grid-container">
<nav class="navigation" id="original">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Order</li>
<li>Order form</li>
<li>Gallery</li>
</ul>
</nav>
<h1 class="name" id="order-form">Order Form</h1>
<div class="blackLogo">
<img src="/images/hoodHealerBlack.jpg" alt="Black Hood Healer Logo" width="200" height="80" class="logo" id="Black" />
</div>
<div class="pinkLogo">
<img src="/images/hoodHealerPink.jpg" alt="Pink Hood Healer Logo" width="200" height="80" class="logo" id="Pink" />
</div>
<div class="container" id="partOne">
<div class="container" id="name">
<h2>Name</h2>
<label for="Fname">First Name:</label>
<input type="text" id="Fname" name="first-name" />
<label for="MInitial">Middle Initial:</label>
<input type="text" id="MInitial" name="middle-initial" />
<label for="Lname">Last Name:</label>
<input type="text" id="Lname" name="last-name" />
</div>
<div class="container" id="billing-address">
<h2 class="heading" id="billingAddress">Billing Address</h2>
<label for="Street-address">Street Address:</label>
<input type="text" id="Street-address" name="StreetAdress" />
<label for="apartment-PO">Apt # or PO Box:</label>
<input type="number" id="apartment-PO" name="apartmentPOBox" />
<!--City, state ; zip code- number; apt number or po box input - number-->
<br />
<label for="city">City:</label>
<input type="text" id="city" name="city" />
<form>
<fieldset>
<label for="state">State</label>
<select id="state" name="state">
<option value="---">---</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">
District of Columbia
</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Northern Marianas Islands">
Northern Marianas Islands
</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</fieldset>
</form>
<label for="zip-code">Zip Code:</label>
<input type="number" id="zip-code" name="zipcode" />
<input type="checkbox" id="mailing-address" name="mailingaddress" value="Mailing address" />
<label for="mailing-address">
Mailing address is the same as billing address.</label
><br />
<div class="container" id="mailing_address">
<h2 class="heading" id="mailingAddress">Mailing Address</h2>
<label for="Street_address">Street Address:</label>
<input type="text" id="Street_address" name="StreetAdress" />
<label for="apartment_PO">Apartment number or PO Box:</label>
<input type="number" id="apartment_PO" name="apartmentPOBox" />
<!--City, state ; zip code- number; apt number or po box input - number-->
<label for="zip_code">Zip Code:</label>
<input type="number" id="zip_code" name="zipcode" />
<label for="City">City:</label>
<input type="text" id="City" name="city" />
<form>
<fieldset>
<label for="State">State</label>
<select id="State" name="state">
<option value="---">---</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District of Columbia">
District of Columbia
</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Guam">Guam</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Northern Marianas Islands">
Northern Marianas Islands
</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Virgin Islands">Virgin Islands</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</fieldset>
</form>
</div>
</div>
</div>
<div class="contaitner" id="partTwo">
<div class="container" id="product-choice">
<h2 class="heading" id="product-Choice">Choose your product:</h2>
<form>
<input type="radio" id="Hat" name="Product" value="HAT" />
<label for="Hat">Hat</label><br />
<input type="radio" id="Shirt" name="Product" value="SHIRT" />
<label for="Shirt">Shirt</label><br />
<input type="radio" id="Hoodie" name="Product" value="HOODIE" />
<label for="Hoodie">Hoodie</label><br />
<input type="radio" id="Pants" name="Product" value="PANTS" />
<label for="Pants">Pants</label><br />
</form>
</div>
<div class="container" id="size-choice">
<h2 class="heading" id="size-Choice">Choose your size:</h2>
<form>
<input type="radio" id="Small" name="Size" value="SMALL" />
<label for="Small">Small</label><br />
<input type="radio" id="Medium" name="Size" value="MEDIUM" />
<label for="Medium">Medium</label><br />
<input type="radio" id="Large" name="Size" value="LARGE" />
<label for="Large">Large</label><br />
<input type="radio" id="X-Large" name="Size" value="X-LARGE" />
<label for="X-Large">X-Large</label><br />
<input type="radio" id="XX-Large" name="Size" value="XX-LARGE" />
<label for="XX-Large">XX-Large</label><br />
<input type="radio" id="XXX-Large" name="Size" value="XXX-LARGE" />
<label for="XXX-Large">XXX-Large</label><br />
<input type="radio" id="XXXX-Large" name="Size" value="XXXX-LARGE" />
<label for="XXXX-Large">XXXX-Large</label><br />
<input type="radio" id="XXXXX-Large" name="Size" value="XXXXX-LARGE" />
<label for="XXXXX-Large">X-Large</label><br />
</form>
</div>
<div class="container" id="logo-color">
<h2 class="heading" id="logo-Color">Choose your style of logo:</h2>
<form>
<input type="radio" id="pink" name="logoColor" value="PINK" />
<label for="pink">Pink</label><br />
<input type="radio" id="black" name="logoColor" value="BLACK" />
<label for="black">Black</label><br />
<!-- <input type="radio" id="Custom" name="logoColor" value="CUSTOM">
<label for="Custom">Custom</label> -->
</form>
<input type="submit" value="Submit" />
</div>
</div>
<footer>
<p>copyright Kajah's Krafts</p>
Contact Us
</footer>
</div>

Answer 1

After going back and double checking my CSS file and the link to the CSS file i found my error. Line 235 container is spelled wrong

Answer 2

Most of the time, when you aren't seeing your stylings being applied, it is a problem with loading the stylesheets. Can you ensure that you are including the link tag in every page's head?
<head>
<!-- omit -->
<link rel="stylesheet" href="/CSS/orderForm.css">
</head>

Answer 3

Most likely the link to your style sheet is pointing to the wrong location. /CSS/orderForm.css try removing the / like this "CSS/orderForm.css"