Question 328482 in Html Question posted in
Some basic documentation can be found here.

Html – Is there any clear reason why this media query grid would not work?

I am trying to create media queries that will change my page into a grid upon resizing, for a homework assignment. I’ve been stuck on this first page as I cannot get my page to turn into a grid once the screen size changes. I believe the media query DOES work, when I change the .man and .aboutme classes to a different width manually, they change. But I can’t get them to sit side by side. I keep trying different methods and I can’t figure out why the .container class won’t change. Sorry if this is totally obvious, I’m still new and trying to learn how to resize this little site I made.

/* CSS (of the media query) */

@media screen and (min-width: 772px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
  }
  .man {
    grid-column: 1;
    grid-row: 1;
  }
  .aboutme {
    grid-column: 2;
    grid-row: 1;
  }
}


/* CSS (default, directly above the query - how I want it
to look mobile-view, as I was instructed to start) */

.aboutme {
  width: 80%;
  margin: 10px;
  padding: 10px;
}

.man {
  width: 100%;
  margin: 5px;
  padding-top: 25px;
}

.aboutme p {
  font-size: 120%;
}
<header>
  <img src="logo.png" class="logo" alt="site logo">
  <nav>
    <ul>
      <li><a href="main.html">Home</a></li>
      <li><a href="alarry.html">About</a>
        <ul>
          <li><a href="#">Larry</a></li>
          <li><a href="#">His Owners</a></li>
        </ul>
      </li>
      <li><a href="gallery.html">Gallery</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </nav>
</header>
<div class="container">
  <img src="untitled-design.jpg" class="man" alt="Big photo">
  <div class="aboutme">
    <h2>The cat, the myth, the legend...</h2>
    <p>Welcome to Larry's Lair! Come meet the cat that everyone is talking about. If you're looking for soft fur, many yawns, and - you guessed it!- no teeth, you've come to the right place. This site is the epicenter of all your much needed Larry content.
      We're happy to invite you to learn more about this unique cat!<br> Larry gets up to crazy antics - all the time! One minute he's snug as a bug in a rug in his bed, and the next he's bounding across the apartment! He jumps from bed to chair to table
      (where he knows he shouldn't be.) What's life with a cat without a bit of mischief?<br> We would be remiss not to mention Larry's affection for cuddling. If he hears you at the door coming home, he'll be waiting with purrs and kisses! He wants to
      shower you in his fluffy love (but he may also start to gnaw on your arm... to each their own!) Larry really is a special little kitty.</p>
  </div>
</div>

I tried using different strategies to create the grids – setting the columns to auto, trying column templates, and different ways of instructing the child elements to be in the grid. But I think the container is the problem, but I don’t see any disconnect between the HTML and the CSS. Maybe it’s staring me in the face but I am not yet staring back lol

Tags:

2

Answers


  1. 0

    I just tried the snippet and it looks like it’s working? .man and .aboutme are sitting next to one another and .container has the grid style applied above the breakpoint you specified, and not below it.

    Your page working as expected

    Login or Signup to reply.
  2. 0

    Revision of your CSS:

    /* The default CSS */
.aboutme {
  margin: 10px;
  padding: 10px;
}

.man {
  margin: 5px;
  padding-top: 25px;
}

.aboutme p {
  font-size: 120%;
}

/* --- the rest your default CSS --- */

/* A media Query for larger screens */
@media screen and (min-width: 772px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
  }
  .man, .aboutme {
    width: auto;
  }
  .man {
    grid-column: 1;
  }
  .aboutme {
    grid-column: 2;
  }
}

    In this updated version, we’ve adjusted the width of the elements with the classes .man and .aboutme to "auto" within the media query. This change allows the grid to determine their widths dynamically. It’s important to ensure that your HTML structure corresponds correctly with these CSS classes.

    If you encounter any further problems, it might be useful to inspect the elements using your browser’s developer tools. This way, you can uncover any unexpected styles or structural issues that might be impacting the layout.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search