How to add responsive News Cards on this project

I have been trying to make a news website. It is just for practice and so far i was able to make a responsive navbar and custom scrollbar for it. However I am unable to make responsive news cards after that for some reason. I want to make responsive news cards under the h1 which includes a clickable link photo , A link heading , a small description and link to the author of the article to be shown on it. Can someone please explain me the issue and send me a solution ?

const selectElement = (element) => document.querySelector(element);

selectElement('.mobile-menu') .addEventListener('click',() => {
    selectElement('header').classList.toggle('active');
})
*,
*::before,
*::after{
  margin: 0;
  padding: 0;
}

html{
  font-size: 10px;
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

a{
  text-decoration: none;
  display: block;
}

.container{
  max-width: 98rem;
  margin: 0 auto;
  padding: 0 2.2rem;
}

header{
  position:fixed;
  top: 0px;
  z-index: 1400;
  height: 5rem;
  width: 100%;
  background-color: rgba(0,0,0,0.8);
  backdrop-filter: blur(2rem);
}

.nav-list{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -1rem;
}

.nav-list-mobile{
  display:none;
}

.nav-link{
  font-size: 1.4rem;
  color: #fff;
  padding: 0 1rem;
  transition: .3s;
}

.nav-link:hover{
  color: greenyellow;
}

.nav-link-logo{
  width: 1.6rem;
  height: 5rem;
  background: url("apple.svg") center no-repeat;
  background-size: 22px;
}

.nav-link-search{
  width: 1.6rem;
  height: 5rem;
  background: url("magnifying-glass.svg") center no-repeat;
}

.nav-link-bag{
  width: 1.6rem;
  height: 4.4rem;
  background: url("magnifying-glass.svg") center no-repeat;
}

@media screen and (max-width: 767px){
  header{
    height: 4.8rem;
    transition: background .36s cubic-bezier(0.32,0.08,0.24, 1),;
                height: .56s cubic-bezier(0.32,0.08,0.24, 1);
  }

  header .container{
    padding: 0;
  }

  .nav-list{
    margin-top: 0;
  }

  .nav-list-mobile{
    display: flex;
  }

  .nav-item{
    width: 4.8rem;
    height: 4.8rem;
    display: flex;
    justify-content: center;
  }

  .nav-item-hidden{
    display: none;
  }

  .mobile-menu{
    position: relative;
    z-index: 1500;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .line{
    position: absolute;
    width: 1.7rem;
    height: 1px;
    background-color: #fff;
    transition: margin-top .3192s cubic-bezier(0.04,0.04,0.12,0.96);
  }

  .line-top{
    margin-top: -1rem;
    margin-left: 10px;
  }

  .line-mid{
    margin-top: 0rem;
    margin-left: 20px;
  }
  .line-bottom{
    margin-top: 1rem;
    margin-left: 10px;
  }

  .active .line-top{
    margin-top: 0;
    transform: rotate(45deg);
    transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
  }

  .active .line-mid{
    display: none;
  }

  .active .line-bottom{
    margin-top: 0;
    transform: rotate(-45deg);
    transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
  }

  header.active{
    height: 100%;
    background-color: #000;
    transition: .3s;
  }

  .nav-link-logo{
    width: 1.8rem;
    height: 4.8rem;
    position: relative;
    z-index: 1500;
  }

  .nav-link-bag{
    width: 100%;
    height: 4.8rem;
  }

  .nav{
    position: relative;
  }

  .nav-link{
    font-size:1.7rem;
    padding: 0;
    margin: auto 0;
  }

  .nav-list-larger{
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    display: block;
    padding: 10.5rem 5rem;
    z-index: 1000;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
  }

  .active .nav-list-larger{
    width: 100%;
    height: 100vh;
    opacity: 1;
    visibility: visible;
  }

  .active .nav-link-bag{
    opacity: 0;
    transition: opacity .3s;
  }

  .nav-list-larger .nav-item{
    width: 100%;
    justify-content: center;
  }

  .nav-list-larger .nav-item:nth-child(9){
    border-bottom: none;
}

.active .nav-list-larger .nav-item{
  animation: fadeIn 1s ease-in;

}

@keyframes fadeIn {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
}

h1{
  margin-top: 5rem;
  margin-left: 20px;
  font-weight: bolder;
  font-size: 24px;
  
}
::-webkit-scrollbar{
  width: 17px;
}
::-webkit-scrollbar-track{
  border: 7px solid  rgba(0,0,0,0.8);
  box-shadow: inset 0 0 2.5px 2px rgba(0,0,0,0.8);
}
::-webkit-scrollbar-thumb{
  background: linear-gradient(45deg,#06dee1,greenyellow);
  border-radius: 15px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>News</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <nav class="nav">
                <ul class="nav-list nav-list-mobile">
                    <li class="nav-item">
                        <div class="mobile-menu">
                            <span class="line line-top"></span>
                            <span class="line line-mid"></span>
                            <span class="line line-bottom"></span>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a href="index.html" class="nav-link nav-link-logo"></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link nav-link-bag"></a>
                    </li>
                </ul>
                <!-- /.nav-list nav-list-mobile -->
                <ul class="nav-list nav-list-larger">
                    <li class="nav-item nav-item-hidden">
                        <a href="index.html" class="nav-link nav-link-logo"></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Tech</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Science</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Travel</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">How To ?</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">More</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link nav-link-search"></a>
                    </li>
                    <li class="nav-item nav-item-hidden">
                        <a href="#" class="nav-link nav-link-bag"></a>
                    </li>

                </ul>
                                <!-- /.nav-list nav-list-larger -->
            </nav>
        </div>
    </header>
      
    
<h1>Trending Now</h1>
    
<script src="main.js"></script>
</body>
</html>

1 thought on “How to add responsive News Cards on this project”

  1. Here is a rough and dirty example. CSS Code is added at the end of the example css.

    Explanation:

    All cards are placed into a wrapper div (here: .cards-wrapper) to anchor the card-grid.

    In this case it is an very simple grid just to be example. It is done with css flexbox: on mobile it expands the cards to 100%, on tablet there are 2 columns and on wider screens there are 4 columns. The settings for the the respinsive columns are in the css elements @media... If you need introducing to flexbox see here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    All cards are wrapped in a div (here: card). That divs are part of the flexbox grid as they are the direct childs of the flexbox container. And the .card div is the parent card container to style the cards as well.

    In the .card div the elements: image with link, headline with link, text, Author with link. Stylings are rough and dirty just to be example too.

    If you are not experienced you may notice a little ‘trick’: the image fullfills the complete width of the card. The content part has a padding. This is possible because the card is devided in a head (.card-image div) and contend (.card-contentdiv). The image div has no margins and paddings. The link has been set to an block element and text-sizings has been set to zero to avoid white space effects. The content area has paddings prepared in the wrapper div .card-content. The other styling are as I think self-explaining 😉

    Hope it helps … 😉

    const selectElement = (element) => document.querySelector(element);
    
    selectElement('.mobile-menu') .addEventListener('click',() => {
        selectElement('header').classList.toggle('active');
    })
    *,
    *::before,
    *::after{
      margin: 0;
      padding: 0;
    }
    
    html{
      font-size: 10px;
      font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
    }
    
    a{
      text-decoration: none;
      display: block;
    }
    
    .container{
      max-width: 98rem;
      margin: 0 auto;
      padding: 0 2.2rem;
    }
    
    header{
      position:fixed;
      top: 0px;
      z-index: 1400;
      height: 5rem;
      width: 100%;
      background-color: rgba(0,0,0,0.8);
      backdrop-filter: blur(2rem);
    }
    
    .nav-list{
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 -1rem;
    }
    
    .nav-list-mobile{
      display:none;
    }
    
    .nav-link{
      font-size: 1.4rem;
      color: #fff;
      padding: 0 1rem;
      transition: .3s;
    }
    
    .nav-link:hover{
      color: greenyellow;
    }
    
    .nav-link-logo{
      width: 1.6rem;
      height: 5rem;
      background: url("apple.svg") center no-repeat;
      background-size: 22px;
    }
    
    .nav-link-search{
      width: 1.6rem;
      height: 5rem;
      background: url("magnifying-glass.svg") center no-repeat;
    }
    
    .nav-link-bag{
      width: 1.6rem;
      height: 4.4rem;
      background: url("magnifying-glass.svg") center no-repeat;
    }
    
    @media screen and (max-width: 767px){
      header{
        height: 4.8rem;
        transition: background .36s cubic-bezier(0.32,0.08,0.24, 1),;
                    height: .56s cubic-bezier(0.32,0.08,0.24, 1);
      }
    
      header .container{
        padding: 0;
      }
    
      .nav-list{
        margin-top: 0;
      }
    
      .nav-list-mobile{
        display: flex;
      }
    
      .nav-item{
        width: 4.8rem;
        height: 4.8rem;
        display: flex;
        justify-content: center;
      }
    
      .nav-item-hidden{
        display: none;
      }
    
      .mobile-menu{
        position: relative;
        z-index: 1500;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    
      .line{
        position: absolute;
        width: 1.7rem;
        height: 1px;
        background-color: #fff;
        transition: margin-top .3192s cubic-bezier(0.04,0.04,0.12,0.96);
      }
    
      .line-top{
        margin-top: -1rem;
        margin-left: 10px;
      }
    
      .line-mid{
        margin-top: 0rem;
        margin-left: 20px;
      }
      .line-bottom{
        margin-top: 1rem;
        margin-left: 10px;
      }
    
      .active .line-top{
        margin-top: 0;
        transform: rotate(45deg);
        transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
      }
    
      .active .line-mid{
        display: none;
      }
    
      .active .line-bottom{
        margin-top: 0;
        transform: rotate(-45deg);
        transition: transform .3192s .1s cubic-bezier(0.04,0.04,0.12,0.96) ;
      }
    
      header.active{
        height: 100%;
        background-color: #000;
        transition: .3s;
      }
    
      .nav-link-logo{
        width: 1.8rem;
        height: 4.8rem;
        position: relative;
        z-index: 1500;
      }
    
      .nav-link-bag{
        width: 100%;
        height: 4.8rem;
      }
    
      .nav{
        position: relative;
      }
    
      .nav-link{
        font-size:1.7rem;
        padding: 0;
        margin: auto 0;
      }
    
      .nav-list-larger{
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        display: block;
        padding: 10.5rem 5rem;
        z-index: 1000;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s;
      }
    
      .active .nav-list-larger{
        width: 100%;
        height: 100vh;
        opacity: 1;
        visibility: visible;
      }
    
      .active .nav-link-bag{
        opacity: 0;
        transition: opacity .3s;
      }
    
      .nav-list-larger .nav-item{
        width: 100%;
        justify-content: center;
      }
    
      .nav-list-larger .nav-item:nth-child(9){
        border-bottom: none;
    }
    
    .active .nav-list-larger .nav-item{
      animation: fadeIn 1s ease-in;
    
    }
    
    @keyframes fadeIn {
      from{
        opacity: 0;
      }
      to{
        opacity: 1;
      }
    }
    }
    
    h1{
      margin-top: 5rem;
      margin-left: 20px;
      font-weight: bolder;
      font-size: 24px;
      
    }
    ::-webkit-scrollbar{
      width: 17px;
    }
    ::-webkit-scrollbar-track{
      border: 7px solid  rgba(0,0,0,0.8);
      box-shadow: inset 0 0 2.5px 2px rgba(0,0,0,0.8);
    }
    ::-webkit-scrollbar-thumb{
      background: linear-gradient(45deg,#06dee1,greenyellow);
      border-radius: 15px;
    }
    /* **********************************
       ADDED 
       cards css 
       ********************************** */
    
    /* corection: header to front */
    
    header {
        z-index: 999;
    }
    
    
    /* card mini-grid to make reponsive */
    
    .cards-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 20px 0;
    }
    
    .card { 
        flex-basis: 100%;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    @media only screen and (min-width: 768px) {
        
        .cards-wrapper {
            margin: 20px 20px;;
        }
    
        .card {
            flex-basis: 49%;
        }
        
    }
    
    @media only screen and (min-width: 1024px) {
    
        .card {
            flex-basis: 24%;
        }
    
    }
    
    
    /* card mini-styling */
    
    .card {
        border: 2px solid #333;
        border-radius: 10px;
        overflow: hidden;
    }
    
    
    .card-image img {
        width: 100%;
        height: auto;
        margin: 0;
    }
    
    .card-image a {
        display: block;
        font-size: 0;
        line-height: 0;
        margin: 0;
    }
    
    .card-content {
        padding: 10px;
    }
    
    .card h2 a {
        margin-bottom: 10px;
        color: #333;
    }
    .card-author {
        margin-top: 10px;`enter code here`
    }
    .card-author a {
        display: inline;
    }
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>News</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="container">
                <nav class="nav">
                    <ul class="nav-list nav-list-mobile">
                        <li class="nav-item">
                            <div class="mobile-menu">
                                <span class="line line-top"></span>
                                <span class="line line-mid"></span>
                                <span class="line line-bottom"></span>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a href="index.html" class="nav-link nav-link-logo"></a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link nav-link-bag"></a>
                        </li>
                    </ul>
                    <!-- /.nav-list nav-list-mobile -->
                    <ul class="nav-list nav-list-larger">
                        <li class="nav-item nav-item-hidden">
                            <a href="index.html" class="nav-link nav-link-logo"></a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Tech</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Science</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Travel</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">How To ?</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">More</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link nav-link-search"></a>
                        </li>
                        <li class="nav-item nav-item-hidden">
                            <a href="#" class="nav-link nav-link-bag"></a>
                        </li>
    
                    </ul>
                                    <!-- /.nav-list nav-list-larger -->
                </nav>
            </div>
        </header>
          
        
    <h1>Trending Now</h1>
    
    <!-- 
    ############################################# 
    ADDED
    cards html
    ############################################# 
    -->
    
    
    <div class="cards-wrapper">
    
    
    
    <div class="card">
    
    <div class="card-image">
    
        <a href="#">
            <img src="https://dummyimage.com/600x400/000/0011ff&text=card">
        </a>
    </div>
    
    <div class="card-content">
    
        <h2><a href="#">Titel with link</a></h2>
    
        <div class="card-description">
    
            <p>Li Europan lingues es membres del sam familie.
                Lor separat existentie es un myth. Por scientie,
                musica, sport etc, litot Europa usa li sam vocabular.</p>
    
        </div>
    
        <div class="card-author">
            Author: <a href="#">Jonny Brown</a>
        </div>
    
    </div>
    
    </div><!-- .card -->
    
    
    
    
    <div class="card">
    
    <div class="card-image">
    
        <a href="#">
            <img src="https://dummyimage.com/600x400/000/0011ff&text=card">
        </a>
    </div>
    
    <div class="card-content">
    
        <h2><a href="#">Titel with link</a></h2>
    
        <div class="card-description">
    
            <p>Li Europan lingues es membres del sam familie.
                Lor separat existentie es un myth. Por scientie,
                musica, sport etc, litot Europa usa li sam vocabular.</p>
    
        </div>
    
        <div class="card-author">
            Author: <a href="#">Jonny Brown</a>
        </div>
    
    </div>
    
    </div><!-- .card -->
    
    
    
    
    <div class="card">
    
    <div class="card-image">
    
        <a href="#">
            <img src="https://dummyimage.com/600x400/000/0011ff&text=card">
        </a>
    </div>
    
    <div class="card-content">
    
        <h2><a href="#">Titel with link</a></h2>
    
        <div class="card-description">
    
            <p>Li Europan lingues es membres del sam familie.
                Lor separat existentie es un myth. Por scientie,
                musica, sport etc, litot Europa usa li sam vocabular.</p>
    
        </div>
    
        <div class="card-author">
            Author: <a href="#">Jonny Brown</a>
        </div>
    
    </div>
    
    </div><!-- .card -->
    
    
    
    
    <div class="card">
    
    <div class="card-image">
    
        <a href="#">
            <img src="https://dummyimage.com/600x400/000/0011ff&text=card">
        </a>
    </div>
    
    <div class="card-content">
    
        <h2><a href="#">Titel with link</a></h2>
    
        <div class="card-description">
    
            <p>Li Europan lingues es membres del sam familie.
                Lor separat existentie es un myth. Por scientie,
                musica, sport etc, litot Europa usa li sam vocabular.</p>
    
        </div>
    
        <div class="card-author">
            Author: <a href="#">Jonny Brown</a>
        </div>
    
    </div>
    
    </div><!-- .card -->
    
    
        
    <script src="main.js"></script>
    </body>
    </html>
    Reply

Leave a Comment