After extensive research and troubleshooting, I am still facing an issue with my CSS. Here is the relevant CSS code for my webpage:
html, body
{
background-color:#E9E9E9;
font-family: Arial;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
@media screen and (min-width: 900px) {
#messageListing {
width: 70%;
font-family: Arial;
list-style-type: none;
padding-left: 15%;
padding-right: 15%;
}
}
@media screen and (max-width: 900px) {
#messageListing {
width: 100%;
font-family: Arial;
list-style-type: none;
padding: 0px;
margin: 0px;
}
}
#messageListing > ul {
list-style-type: none;
padding: 0px;
}
@media screen and (min-width: 900px) {
// More CSS rules here...
}
...
#postDiscussionForm {
padding-top: 20px;
}
Despite trying various solutions, including checking HTML files and using media queries, the issue persists. Any insights or suggestions would be greatly appreciated.
For further reference, please see this Inspect view screenshot and another view of the inspect view.
If additional information is required, such as HTML snippets or JavaScript functions, please let me know. Thank you!