CODEWITHSUNDEEP
htmlcsscss-grid
brandkast
brandkast

Reputation: 95

Problems collapsing a responsive layout using CSS Grid

I'm using CSS Grid for my layout. Maybe I'm just laying things out improperly, but I want my navigation to collapse down into 2 columns and 2 rows at the smallest width (< 22.5em) and then expand to 1 column, 1 row at the larger widths (> 22.5em).

But my navigation is also in its own separate columns and rows (changes with the width) within my header. How can I achieve this while maintaining my styles for larger width devices?

Here's an example of what I want < 22.5 em:

Here's an example of what I want < 22.5 em

This is the site currently

And here's my code: 

/* CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Global styles */

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Lato, sans-serif;
  font-size: 1em;
  color: #222;
}

a, a.visited {
	display: block;
	text-decoration: none;
}

p, blockquote {
  padding: 0.625em;
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3 {
  font-family: "acumin-pro-extra-condensed", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
	margin: 0;
}

h1 {
	color: hsl(45, 100%, 50%);
}

h1 a, h1 a:visited {
  color: inherit;
}

h2 {
  color: hsl(26, 64%, 31%);
  padding-bottom: 0.2em;
}

header {
	display: grid;
	grid-template-rows: auto;
}

nav ul {
	margin: 0;
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

nav li {
  width: 25%;
  text-align: center;
}

.logo {
	padding: 0.625em;
	grid-column: 1;
}

.logo, .title {
	grid-row: 1;
	justify-self: center;
	align-self: center;
}

.title {
	grid-column: 2;
}

nav a:hover, nav a:visited:hover {
  color: rgb(255, 207, 64);
}

.about, .testimonials, .contact {
  padding: 1.25em;
}

.testimonials {
  background-color: rgb(255, 220, 115);
}

.gallery {
	display: grid;
	grid-gap: 0.625em;
}

.gallery h2, .form h2 {
  display: none;
}

.form label {
  visibility: hidden;
}

.form label:nth-of-type(5) {
  font-family: Lato, sans-serif;
  font-size: 0.8em;
  visibility: visible;
}

footer {
  color: #eee;
  padding: 0.625em;
  background-color: rgb(40, 40, 40);
}

footer a, footer a:visited, footer .fa {
  font-style: normal;
  color: #eee;
  text-decoration: none;
  padding: 0.625em;
}

/* Mobile Styles */
header {
	grid-template-columns: 25% 75%;
}

nav {
	grid-column: 1 / 3;
	grid-row: 2;
}

nav ul {
  margin: 0;
  padding: 1.25em;
  background-color: rgb(40, 40, 40);
}

nav a, nav a:visited {
  color: #eee;
}

.banner {
	display: none;
}

main, footer, h1 {
  line-height: 1.25em;
}

h1 {
	font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

.gallery {
	grid-template-columns: 0 repeat(3, 1fr) 0;
	grid-template-rows: 0 repeat(2, 1fr) 0;
}

.pup1, .pup2, .pup3 {
	grid-row: 2;
}

.pup1 {
	grid-column: 2 / 3;
}

.pup2 {
	grid-column: 3 / 4;
}

.pup3 {
	grid-column: 4 / 5;
}

.pup4, .pup5, .pup6 {
	grid-row: 3;
}

.pup4 {
	grid-column: 2 / 3;
}

.pup5 {
	grid-column: 3 / 4;
}

.pup6 {
	grid-column: 4 / 5;
}

.contact {
  padding: 1.25em 1.25em 0 1.25em;
}

.form {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  overflow: hidden;
  padding: 0 1.25em 1.25em 1.25em;
}

.form form {
  width: 100%;
  padding: 0;
  font-family: Lato, sans-serif;
  display: inline-block;
  font-size: 1em;
}

.form input[type=text], .form input[type=tel], .form input[type=email], .form textarea {
  border: 1px solid #bfbfbf;
  padding: 1.25em;
  display: block;
}

.form input[type=text], .form input[type=tel], .form input[type=email] {
  border: 1px solid #bfbfbf;
  width: 70%;
}

.form textarea {
  border: 1px solid #bfbfbf;
  width: 90%;
}

.form input[type=submit] {
  display: block;
  width: 90%;
  border: 1px solid #bfbfbf;
  background-color: #eee;
  padding: 0.3125em;
}

footer {
  text-align: center;
}

footer ul {
  padding: 0;
}

footer .email, footer .phone {
  text-decoration: underline;
  font-style: normal;
  font-size: 1.2em;
  color: rgb(255, 220, 115);
}

footer li {
  padding: 0.3125em;
}

footer .fa {
  font-size: 2em;
  padding-left: 0.625em;
  padding-right: 0.625em;
}

footer .socialMedia li {
  display: inline;
}

/* Larger Phone Styles */
@media (min-width: 22.5em) and (max-width: 47.99em) {
	header {
			grid-template-columns: 25% 75%;
		}

	h1 {
		  font-size: 3em;
		}
}

/* Tablet Styles */
@media (min-width: 48em) and (max-width: 63.99em) {
	h1 {
		font-size: 4em;
		line-height: 1.125em;
	}
}

/* Desktop Styles */
@media (min-width: 64em) {
	header {
		grid-template-columns: 14% 42% 43%;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	nav {
		grid-column: 3;
		grid-row: 1;
	}

	nav ul {
		background-color: transparent;
		padding: 0;
	}

	nav a, nav a:visited {
		color: rgb(40, 40, 40);
		text-transform: uppercase;
	}

	body {
		line-height: 1.375em;
	}

	h1 {
		font-size: 5em;
		line-height: 1.05em;
	}

	main {
		display: grid;
		grid-template-columns: 1.7fr 1fr;
		grid-template-rows: auto;
	}

	.banner {
		display: initial;
		grid-column: 1 / 3;
		grid-row: 1;
	}

	.about {
		grid-column: 1;
		grid-row: 2;
	}

	.testimonials {
		grid-column: 2;
		grid-row: 2;
		background-color: transparent;
	}

	.gallery {
		grid-template-columns: 0 repeat(6, 1fr) 0;
		grid-template-rows: 0 1fr 0;
	}

	.pup1 {
		grid-column: 2 / 3;
		grid-row: 2;
	}

	.pup2 {
		grid-column: 3 / 4;
		grid-row: 2;
	}

	.pup3 {
		grid-column: 4 / 5;
		grid-row: 2;
	}

	.pup4 {
		grid-column: 5 / 6;
		grid-row: 2;
	}

	.pup5 {
		grid-column: 6 / 7;
		grid-row: 2;
	}

	.pup6 {
		grid-column: 7 / 8;
		grid-row: 2;
	}
}
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Madeline Jones -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Sunny Shepherds is a world class German Shepherd breeder that serves the entire region of South Florida.">
  <!-- Adds in social media icons -->
  <script src="https://use.fontawesome.com/c60523e346.js"></script>
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Adds in header font -->
  <script src="https://use.typekit.net/wao1zsr.js"></script>
  <script>try{Typekit.load({ async: true });}catch(e){}</script>
  <!-- Adds in body font -->
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <!--[if lt IE 9]><script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script><![end if]-->
  <title>Sunny Shepherds | German Shepherd Breeder</title>
</head>
<body>
  <header>
    <div class="logo">
      <a href="index.html"><img src="img/logo.png" alt="Sunny Shepherds Logo"></a>
    </div>
    <div class="title">
      <h1><a href="index.html">Sunny Shepherds</a></h1>
    </div>
    <nav>
      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="breedInfo.html">Breed Info</a></li>
        <li><a href="ourDogs.html">Our Dogs</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div class="banner">
      <img src="img/farm.png" alt="Our sunny farm located in Miami, Florida">
    </div>
    <section class="about">
      <h2>About Us</h2>
      <p>Sunny Shepherds takes great pride in producing <strong>top-of-the-line working dogs</strong>, regardless of the task at hand. We produce dogs for sport, police work, family protection, and any other area where the dog makes the difference.</p>

      <p>We only breed dogs that have had rigid testing done by outside sources, as well as our own evaluation. Such testing covers <strong>healthy hips and elbows</strong>, genetic defects of the ears, allergies, working drives, social skills and coat type.</p>

      <p>All of our dogs are kept on our sunny and spacious facility grounds. Each of them are reared in a loving, family environment with a lot of stimulation. We introduce them to a variety of environments and situations so that they are well suited to any home.</p>
    </section>
    <section class="testimonials">
      <h2>Testimonials</h2>
      <blockquote>
        <q>Very helpful and amazing service. My family bought a puppy from here and we are very satisfied. Thank you so much Sunny Shepherds for the beautiful pup. Highly recommend this place.</q> &mdash; Victoria Langston
      </blockquote>
      <blockquote>
        <q>Recently bought a puppy from Sunny Shepherds and I couldn't be happier!! Cooper is growing up to be a beautiful dog and a huge part of our family. Thank you so much for your professionalism and all your knowledge.</q> &mdash; James Reed
      </blockquote>
    </section>
  </main>
  <section class="gallery">
    <h2>Our Puppies</h2>
      <div class="pup1">
        <img src="img/pup_1.png" alt="3 week old sable puppy">
      </div>
      <div class="pup2">
        <img src="img/pup_2.png" alt="5 week old blue puppy">
      </div>
      <div class="pup3">
        <img src="img/pup_3.png" alt="9 week old black-and-tan puppy">
      </div>
      <div class="pup4">
        <img src="img/pup_4.png" alt="5 week old black-and-tan puppy">
      </div>
      <div class="pup5">
        <img src="img/pup_5.png" alt="7 week old black-and-tan puppy">
      </div>
      <div class="pup6">
        <img src="img/pup_6.png" alt="6 week old black-and-tan puppy">
      </div>
  </section>
  <footer>
    <address>
      <ul>
        <li><span class="email">E-mail</span></li>
        <li><a href="mailto:[email protected]">[email protected]</a></li>
      </ul>
      <ul>
        <li><span class="phone">Phone</span></li>
        <li><a href="tel:954-555-5555">(954) 555-5555</a></li>
      </ul>
      <ul class="socialMedia">
        <li><a href="#" class="fa fa-facebook"></a></li>
        <li><a href="#" class="fa fa-twitter"></a></li>
        <li><a href="#" class="fa fa-instagram"></a></li>
      </ul>
    </address>
  </footer>
</body>
</html>

Upvotes: 3

Views: 2229

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371143

Since you're already using the nav element, there's no need for a nested ul. So my first suggestion would be to clean up the navigation structure.

Instead of this:

<nav>
  <ul>
    <li><a href="about.html">About</a></li>
    <li><a href="breedInfo.html">Breed Info</a></li>
    <li><a href="ourDogs.html">Our Dogs</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Just use this:

<nav>
  <a href="about.html">About</a>
  <a href="breedInfo.html">Breed Info</a>
  <a href="ourDogs.html">Our Dogs</a>
  <a href="contact.html">Contact</a>
</nav>

I would also remove the extra wrappers around the other key elements. They're unnecessary clutter (unless you have a specific reason for adding extra wrappers).

Then, because you're using flex properties on the nav items, you actually don't need to adjust your Grid rules. The 2x2 grid of nav items can be achieved by adjusting your flex rules.

This will give you four nav items in a row on larger screens:

nav {
  display: flex;
}

nav > a {
  flex: 0 0 25%; /* flex-grow, flex-shrink, flex-basis */
}

This will give you a 2x2 grid of nav items on smaller screens:

  nav {
    display: flex;
    flex-wrap: wrap;
  }

  nav > a {
    flex: 0 0 50%;
  }


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Lato, sans-serif;
  font-size: 1em;
  color: #222;
  line-height: 1;
}

a,
a.visited {
  display: block;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

h1 {
  font-family: "acumin-pro-extra-condensed", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0;
  color: hsl(45, 100%, 50%);
}

h1 a,
h1 a:visited {
  color: inherit;
}

header {
  display: grid;
  grid-template-rows: auto;
}

nav {
  display: flex;
  justify-content: center;
}

nav>a {
  flex: 0 0 25%;
  text-align: center;
}

.logo {
  padding: 0.625em;
  grid-column: 1;
}

.logo,
.title {
  justify-self: center;
  align-self: center;
}

.title {
  grid-column: 2;
}

nav a:hover,
nav a:visited:hover {
  color: rgb(255, 207, 64);
}


/* Mobile Styles */

header {
  grid-template-columns: 25% 75%;
}

nav {
  grid-column: 1 / 3;
  grid-row: 2;
  margin: 0;
  padding: 1.25em;
  background-color: rgb(40, 40, 40);
  flex-wrap: wrap;
}

nav a,
nav a:visited {
  color: #eee;
  flex: 0 0 50%;
  padding: 25px;
}

h1 {
  line-height: 1.25em;
  font-size: 2.5em;
}


/* Larger Phone Styles */

header {
  grid-template-columns: 25% 75%;
}

h1 {
  font-size: 3em;
}


/* Tablet Styles */

@media (min-width: 48em) and (max-width: 63.99em) {
  h1 {
    font-size: 4em;
    line-height: 1.125em;
  }
}


/* Desktop Styles */

@media (min-width: 64em) {
  header {
    grid-template-columns: 14% 42% 43%;
    align-items: center;
  }
  nav {
    grid-column: 3;
    grid-row: 1;
    background-color: transparent;
  }
  nav a,
  nav a:visited {
    color: rgb(40, 40, 40);
    text-transform: uppercase;
    padding: 0;
    flex: auto;
  }
  body {
    line-height: 1.375em;
  }
  h1 {
    font-size: 5em;
    line-height: 1.05em;
  }
}
<header>
  <a href="index.html" class="logo">
    <img src="http://www.public.asu.edu/~mrjone21/SunnyShepherds/img/logo.png" alt="Sunny Shepherds Logo">
  </a>
  <h1 class="title">
    <a href="index.html">Sunny Shepherds</a>
  </h1>
  <nav>
    <a href="about.html">About</a>
    <a href="breedInfo.html">Breed Info</a>
    <a href="ourDogs.html">Our Dogs</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

jsFiddle

Upvotes: 1

Related Questions