My elements are overlapping in css and html-CodePudding

Hi so I have a flex containers and I named it NewsSection that contains another flex container named NewsTeller that contains an image and a h1 and a p elements and I have some javascript code that creates a NewsTeller div and appends it to the NewsSection container

But on mobile it's overlapping bcuz the paragraph element is pretty big

Here's my css

/*
* {
   scroll-behavior: smooth;
   background: #171719;
}
body {
    font-size: 15pt;
    margin: 0;
    padding: 0;
    font-family: 'Cairo', sans-serif;
    background: #171719;
}

.Navbar {
   position: sticky;
   width: 100vw;
   height: 75px;
   display: flex;
   padding: 0;
   margin: 0;
}

.NavItems {
   width: 100%;
   padding: 0;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   justify-content: space-evenly;
   color: white;
   font-size: 15pt;
}
*/

a {
   color: currentColor;
   text-decoration: grey;
   font-family: 'Cairo', sans-serif;
}

#NewsSection {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}




#NewsTeller {
  width: 100vw;
  height: 100vh;
  color: white;
}

And the live website is here https://shortglobalnews.netlify.app

CodePudding user response：

On #NewsSection remove the set height, this element seems dynamic & is being restricted by the parent's height being explicit.

Remove this property from the wrapper

#NewsSection {
 height: 100vh;
}

Also, your images would benefit from this CSS property. It helps it crop properly for as big as they are and all being different sizes, to begin with.

img {
    object-fit: cover;
}