I have a basic footer lined out and my nav bar and header have both dynamically adapted so far nothing crazy but I'm working on it however when i went to try and manipulate my footer I just couldn't get it to change with the screen size no matter what I did. any help appreciated. also please keep in mind I'm still very new to this so any recommendations are also welcome
HTML:
<div class="Footer"><section><div><Section><a>Contact Us</a><br><i class="fa-solid fa-location-dot"></i><a href="Google address remmoved for privacy"> text address</a><br><a href="google address removed for privacy"> Text address </a></section><br><i class="fa-solid fa-phone"></i><a href="tel+> Phone number </a></div></section><section><div><a> Hours:<br> Monday - Friday: 8am - 5pm<br> Saturday: 8am - 1pm<br> Sunday: Closed</a></div></section><section><div> Navigate<br><a href="https://www.facebook.com/">Facebook</a><br><a href="https://www.instagram.com/">Instagram</a><br><a href="https://www.youtube.com/">Youtube</a><br><a href="https://www.linkedin.com/">LinkedIn</a><br><a href="https://www.pinterest.com/">Pinterest</a><br><a href="https://www.twitter.com/">Twitter</a></div></section></div></body></html>CSS:
/*footer*/.Footer { display: flex; justify-content: space-around; background-color: black; padding: 20px; flex-direction: row; flex-wrap: wrap; } .Footer > section { flex: 1; text-align: center; width: calc(33.33% - 20px); display: block; flex-wrap: wrap; } .Footer a { text-decoration: none; color: #FFFFFF; transition: color 0.7s ease; } .Footer i { margin-right: 5px; color: #977847; transition: color 0.7s ease; } .Footer i:hover{ color: #FFFFFF; transition: 0.5 ease; } .Footer a:hover{ color: #977847; transition: 0.5 ease; } @media screen and (max-width: 614px){ .Footer{ display: none; } }I have tried absoloutly everything including just setting the display for the footer to none which should just mean that when the screen width is below 614px it should just disapear or atleast the rest of the formatting and even that didnt work. also the @media is working just fine elsewhere in my site and yes its got diffrent sizes aswell so there shouldnt be a conflict there.