flex-direction: row isn't working in media query-CodePudding

When the screen size hits a certain number of pixels, I'm trying to get my footer columns to turn into rows inside my media query. I'm following along with a tutorial. It doesn't seem to be working, though. I've checked for typos and searched google high and low for answers, but nothing seems to be working. Am I missing something?

footer{
background: var(--primary-50);
padding-top: 5rem;
padding-bottom: 2rem;
}

.footer-wrapper{
 display: flex;
 flex-direction: column;
gap: 3rem;
}

.footer-logo{
width: 150px;
margin-bottom: 2rem;
}

.footer-desc{
font-size: 1.4rem;
color: #360215;
margin-bottom: 2rem;
}

.footer-social-title{
font-size: 1.8rem;
color: #360215;
margin-bottom: 1rem;
}

 .footer-socials li{
display: inline-block;
margin-right: 0.5rem;
}

.footer-socials a{
padding: 0.5rem 0.8rem;
background-color:#f7e4eb ;
border: 1px solid var(--primary-300);
border-radius: 8px;
}

.footer-socials svg{
width: 20px;
color: var(--black);
}

.footer-text-title{
font-size: 1.8rem;
margin-bottom: 1rem;
color:#360215;
font-weight: 600;
}

.footer-text a{
font-size: 1.4rem;
margin-bottom: 0.5rem;
color: var(--black);
font-family: 'Assistant';
font-weight: 500;
line-height: 1.4rem;
}
@media only screen and (min-width: 768px){
 footer{
    padding-top: 8rem;
    padding-bottom: 4rem;
  }

.footer-wrapper {
    flex-direction: row;
}

.footer-col1{
    flex: 4;
}

.footer-col2{
    flex: 2;
}

.footer-desc{
    max-width: 300px;
    font-size: 1.8rem;
    margin-bottom: 2.5rem;
}

.footer-social-title{
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.footer-text-title{
    font-size: 2rem;
    margin-bottom: 2rem;
}

.footer-text a{
   font-size: 1.8rem;
   margin-bottom: 1rem;
  }
}

Here's the HTML!

<footer>
<div >
    <div >
        <div >
            <div >
                <img src="./shaif-s-cuisine-starter_files/images/plzwork.svg" alt="Soul Kitchen">
            </div>
            <p >
                A passion project full of delicious recipes that remind me of my southern roots.
            </p>
            <div >
                <h4 >Follow Me!</h4>
                <ol>
                    <li>
                        <a href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
                                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path
                                    d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
                            </svg>
                        </a>
                    </li>
                </ol>
            </div>
            <div >
                <h3 >
                    Links
                </h3>
                <ol >
                    <li>
                        <a href="./home.html">Home</a>
                    </li>
                    <li>
                        <a href="./recipes.html">Recipes</a>
                    </li>
                    <li>
                        <a href="./cookterms.html">Cooking Terms</a>
                    </li>
                    <li>
                        <a href="./contact.html">Contact</a>
                    </li>
                    <li>
                        <a href="#">Privacy Policy</a>
                    </li>
                </ol>
            </div>
            <div >
                <h3 >
                    Recipes
                </h3>
                <ol >
                    <li>
                        <a href="#">Breakfast</a>
                    </li>
                    <li>
                        <a href="#">Lunch</a>
                    </li>
                    <li>
                        <a href="#">Dinner</a>
                    </li>
                    <li>
                        <a href="#">Snacks</a>
                    </li>
                    <li>
                        <a href="#">Desserts</a>
                    </li>
                    <li>
                        <a href="#">Drinks</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

Your example CSS isn't enough information to give you a direct fix that I'm confident will work. At the least, I need to know what's actually happening and have the mark-up also included. However, I can give you this example JSFiddle where I admittedly had to toy with it a lot and make assumptions about the HTML mark-up: https://jsfiddle.net/a9Lxryc6/1/

My best guess is you had your nested row/column items in another object, like the flex footer wrapper was around footer instead of the other way around.

Mark-up from my JSFiddle example (in case it disappears):

<footer>
  <div >
    <div >
      meh
    </div>
    <div >
      blah
    </div>
    <div >
      blah2
    </div>
    <div >
      blahdesc
    </div>
  </div>
</footer>

CSS remains unchanged.

CodePudding user response：

There is something wrong with your HTML. You had not correctly closed the div's. Please check the snippet below.

footer{
    background: var(--primary-50);
    padding-top: 5rem;
    padding-bottom: 2rem;
    }

    .footer-wrapper{
     display: flex;
     flex-direction: column;
    gap: 3rem;
    }

    .footer-logo{
    width: 150px;
    margin-bottom: 2rem;
    }

    .footer-desc{
    font-size: 1.4rem;
    color: #360215;
    margin-bottom: 2rem;
    }

    .footer-social-title{
    font-size: 1.8rem;
    color: #360215;
    margin-bottom: 1rem;
    }

     .footer-socials li{
    display: inline-block;
    margin-right: 0.5rem;
    }

    .footer-socials a{
    padding: 0.5rem 0.8rem;
    background-color:#f7e4eb ;
    border: 1px solid var(--primary-300);
    border-radius: 8px;
    }

    .footer-socials svg{
    width: 20px;
    color: var(--black);
    }

    .footer-text-title{
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color:#360215;
    font-weight: 600;
    }

    .footer-text a{
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--black);
    font-family: 'Assistant';
    font-weight: 500;
    line-height: 1.4rem;
    }
    @media only screen and (min-width: 768px){
     footer{
        padding-top: 8rem;
        padding-bottom: 4rem;
      }

.footer-wrapper {
   flex-direction: row;
}
    .footer-col1{
        flex: 4;
    }

    .footer-col2{
        flex: 2;
    }

    .footer-desc{
        max-width: 300px;
        font-size: 1.8rem;
        margin-bottom: 2.5rem;
    }

    .footer-social-title{
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .footer-text-title{
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    .footer-text a{
       font-size: 1.8rem;
       margin-bottom: 1rem;
      }
    }

<footer>
    <div >
        <div >
            <div >
                <div >
                    <img src="./shaif-s-cuisine-starter_files/images/plzwork.svg" alt="Soul Kitchen">
                </div>
                <p >
                    A passion project full of delicious recipes that remind me of my southern roots.
                </p>
                <div >
                    <h4 >Follow Me!</h4>
                    <ol>
                        <li>
                            <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
                                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <path
                                        d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
                                </svg>
                            </a>
                        </li>
                    </ol>
                </div>
            </div>
            <div >
                <h3 >
                    Links
                </h3>
                <ol >
                    <li>
                        <a href="./home.html">Home</a>
                    </li>
                    <li>
                        <a href="./recipes.html">Recipes</a>
                    </li>
                    <li>
                        <a href="./cookterms.html">Cooking Terms</a>
                    </li>
                    <li>
                        <a href="./contact.html">Contact</a>
                    </li>
                    <li>
                        <a href="#">Privacy Policy</a>
                    </li>
                </ol>
            </div>
            <div >
                <h3 >
                    Recipes
                </h3>
                <ol >
                    <li>
                        <a href="#">Breakfast</a>
                    </li>
                    <li>
                        <a href="#">Lunch</a>
                    </li>
                    <li>
                        <a href="#">Dinner</a>
                    </li>
                    <li>
                        <a href="#">Snacks</a>
                    </li>
                    <li>
                        <a href="#">Desserts</a>
                    </li>
                    <li>
                        <a href="#">Drinks</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</footer>