• Locked
No replies
Thu, 2020-03-26 16:44
indys
indys's picture
Offline
newbie
Last seen: 2 years 11 weeks ago
Timezone: GMT-5
Joined: 2020-03-26
Posts: 1
Points: 2

Hello all,

This issue is driving me crazy and Google has not produced any results.

I have a basic local site (HTML & CSS have both been validated with no issues). I made a CSS grid for it. Works fine.

When I built the media query, the media query refused to work when screen was resized.

I looked at some other examples online and noticed some people don't put a period in front of their grid-container class in CSS OR in the media query, whereas most people do.

I removed the periods in front of the grid-container class and in the media query, and now it works.

Can anyone tell me what I'm missing here? Why would the media query work only if I remove the period from the class and the media query?

Here's the HTML:

<!DOCTYPE html>  
 
<html lang= en>
 
<head>
<meta charset = "utf-8"> 
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/layout.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
    <title>My First Website</title>
</head>
 
 <body>
 
     <div class="grid-container">
 
     <header class="grid-header"><h1>Welcome to My First Website</h1></header>
 
 
      <nav class="grid-nav">
 
        <a id="home-button" href="index.html"><!--<i class="fa fa-home" aria-hidden="true"></i> --> Home</a>
 
        <a href="about.html"><!--<i class="fa fa-users" aria-hidden="true"></i> --> About</a>
 
       <!-- <a href="#"><i class="fa fa-phone-square" aria-hidden="true"></i> Contact</a> -->
 
     </nav>
 
 
 
 
 
 
 <article class="grid-article-1" id="article-1">
 
 <h2>Article # 1</h2>
 
     <a href = "https://www.google.com/">Google</a>
 
     <p><a href = "https://www.google.com/">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Nulla dictum lorem in ipsum consequat, eu elementum nibh consectetur. Donec ac varius lacus, ut suscipit ante. Mauris accumsan dui dolor, vel tristique mi fermentum in. Mauris vel enim vitae nibh volutpat lobortis in eget enim. Nunc et laoreet neque. Aliquam tincidunt sit amet massa eu malesuada. Vestibulum at ornare risus. Fusce malesuada, neque eget iaculis feugiat, risus magna imperdiet lectus, sed posuere metus tellus sit amet tortor. Aenean pellentesque lectus sit amet est lobortis, eu facilisis risus consectetur. Ut at molestie tellus, et rhoncus purus. Vivamus egestas pellentesque tellus ut luctus. Nullam maximus, libero ac viverra dapibus, orci tortor laoreet ligula, non rhoncus est leo id erat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</article>
 
 
 
 
 
 
 
<article class="grid-article-2, large-green-text">
 <h2>Article # 2</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lorem in ipsum consequat, eu elementum nibh consectetur. Donec ac varius lacus, ut suscipit ante. Mauris accumsan dui dolor, vel tristique mi fermentum in. Mauris vel enim vitae nibh volutpat lobortis in eget enim. Nunc et laoreet neque. Aliquam tincidunt sit amet massa eu malesuada. Vestibulum at ornare risus. Fusce malesuada, neque eget iaculis feugiat, risus magna imperdiet lectus, sed posuere metus tellus sit amet tortor. Aenean pellentesque lectus sit amet est lobortis, eu facilisis risus consectetur. Ut at molestie tellus, et rhoncus purus. Vivamus egestas pellentesque tellus ut luctus. Nullam maximus, libero ac viverra dapibus, orci tortor laoreet ligula, non rhoncus est leo id erat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</article>
 
 
 
       <aside class="grid-aside">
     <h3>This is the aside</h3>
        <p class="large-green-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lorem in ipsum consequat, eu elementum nibh consectetur. Donec ac varius lacus, ut suscipit ante. Mauris accumsan dui dolor, vel tristique mi fermentum in. Mauris vel enim vitae nibh volutpat lobortis in eget enim. Nunc et laoreet neque. Aliquam tincidunt sit amet massa eu malesuada. Vestibulum at ornare risus. Fusce malesuada, neque eget iaculis feugiat, risus magna imperdiet lectus, sed posuere metus tellus sit amet tortor. Aenean pellentesque lectus sit amet est lobortis, eu facilisis risus consectetur. Ut at molestie tellus, et rhoncus purus. Vivamus egestas pellentesque tellus ut luctus. Nullam maximus, libero ac viverra dapibus, orci tortor laoreet ligula, non rhoncus est leo id erat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        <!--
           <a href="https://www.google.ca/"><img src="img/mug1.jpeg" alt ="Picture of Mug1" height = "100" width = "100"></a>
        <img src="img/mug2.jpeg" alt ="Picture of Mug2" height = "100" width = "100">
-->
     </aside>
 
 
 
 
 
    <section class= "grid-section">
     <h3>This is the Section</h3>
        <p class="large-green-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dictum lorem in ipsum consequat, eu elementum nibh consectetur. Donec ac varius lacus, ut suscipit ante. Mauris accumsan dui dolor, vel tristique mi fermentum in. Mauris vel enim vitae nibh volutpat lobortis in eget enim. Nunc et laoreet neque. Aliquam tincidunt sit amet massa eu malesuada. Vestibulum at ornare risus. Fusce malesuada, neque eget iaculis feugiat, risus magna imperdiet lectus, sed posuere metus tellus sit amet tortor. Aenean pellentesque lectus sit amet est lobortis, eu facilisis risus consectetur. Ut at molestie tellus, et rhoncus purus. Vivamus egestas pellentesque tellus ut luctus. Nullam maximus, libero ac viverra dapibus, orci tortor laoreet ligula, non rhoncus est leo id erat. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
     </section>
 
 
 
 
       <footer class= "grid-footer">
     <p>This is the footer. Copyright 2055.</p>
     </footer>
 
 
     </div>
</body>  
 
</html>

Here's the CSS WITH the period in front of grid-container and in the media query:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
  }
 
.grid-header
{
   grid-area: header;
    grid-column: 1 /4;
   grid-row:1;
    background-color: blue;
    color:white;
    text-align: center;
    font-size: 110%;
}
 
.grid-nav
{
   grid-area: nav;
    grid-column: 1/4;
   grid-row:2;
    background-color: darkorange;
    color:white;
    text-align: center;
    font-size: 110%;
}
 
.grid-empty-div
{
   grid-area: emptyDiv;
    grid-column: 1 / 3;
   grid-row:3;
    background-color: darkgrey;
    color:white;
    text-align: center;
    font-size: 110%;
}
.grid-aside
{
   grid-area: aside;
    grid-column: 3;
   grid-row:3 / 7;
    background-color: black;
    color:white;
    text-align: center;
    font-size: 110%;
}
.grid-article-1
{
   grid-area: article1;
    grid-column:1 / 3;
   grid-row: 4;
    background-color: slategray;
    color:white;
    text-align: center;
    font-size: 110%;
}
 
.grid-article-2
{
   grid-area: article2;
    grid-column:1 / 3;
   grid-row: 5;
    background-color: deeppink;
    color:white;
    text-align: center;
    font-size: 110%;
}
 
.grid-section
{
   grid-area: section;
    grid-column:1 / 3;
   grid-row: 6;
    background-color: greenyellow;
    color:white;
    text-align: center;
    font-size: 110%;
}
 
 
.grid-footer
{
   grid-area: footer;
    grid-column:1 / 4;
   grid-row: 7;
    background-color: deepskyblue;
    color:white;
    text-align: center;
    font-size: 110%;
}
 
 
 
@media (min-width: 500px)   {  
  .grid-container { 
        grid-template-columns: 100%; 
 
   }
}

I am self taught, so I apologize if my terminology is incorrect.

Thanks in advance for any responses.

Top
Tags: