I am new to web design and currently taking a course. As part of my assignment, I need to make my website responsive. However, I am having trouble with my media queries. Despite hours of research and tweaking, some elements are not responding as expected.
Here are the media queries I have implemented:
/*media queries*/
/*768px*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
.tm-logo{
align-items: center;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px){
.tm-nav ul li a{
padding: 20px 30px;
text-decoration: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px){
.tm-nav ul li{
display: inline-block;
background-color: #80c625;
padding: 10px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px){
.divTableBody{
padding: 5px;
align-content: center;
}
}
...
This is a snippet of my CSS:
/*default page style*/
body{
display: block;
background-color: #eeeeee;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
max-width: 100%;
padding: 0.5%;
}
...
As a beginner, I might have made mistakes in my code and I am open to any feedback or suggestions. I need to submit this assignment tonight and any assistance would be greatly appreciated. Thank you!