'how to get a section to flex in a column

I'm working on media queries, I'm trying to go from a tablet view to a desktop view. I can only get one or the other right, not both.

https://imgur.com/gallery/qcFtB8F The first image is supposed to be a desktop view the second image is a tablet view. I broke my code somewhere and now I can't get a tablet view on my page. I'm stuck with also getting the desktop view.

<div class="container">
  <section class="winter">
    <div class="outside-border">
      <div class="section-heading">
        <h2>Winter</h2>
      </div>
      <div class="inside-border">
        <div class="winter-image">
          <a href="winter.html">
            <img src="assets/images/winter.jpg" alt="Winter Image">
          </a>
        </div>
        <div class="section-content">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore         enim sequi dignissimos vel fugit
            reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui
            eaque.</p>
        </div>
      </div>
    </div>

CSS

@media screen and (min-width: 989px) {
    nav a {
    display: inline;
    flex-direction: left
  }

  .big-hero{
   height: 100vh;
  }

  .container{
    display: inline-block;
    flex-direction: column;

  }

}

@media screen and (min-width: 768px) {
  main {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;
  padding: 10px;
  gap: 1px -10px;

   }

    footer a{
     text-align: right;
     
     
   }

   .big-hero{
     height: 50vh;
   }

}
htmlcss


Solution 1:[1]

I think the media queries are overlapping, to prevent them from overlapping try this way

@media (min-width: 768px) and (max-width: 987px)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Fernando_Akistapace

Related Questions