I am in the process of creating a mobile-friendly version of a website, and in order to achieve this, I need to switch a navbar from a display:inline-style list to a bulleted list. Below are the HTML and CSS files for a simplified version of this:
ul li {
display: inline;
}
@media only screen and (max-width: 600px) {
ul li {
display: block;
list-style-type: circle; /* Despite my efforts, this is not working as intended. */
}
ul {
list-style-type: circle; /* Also not behaving as expected. */
}
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>Although everything else is functioning correctly, the bullets in front of the list items are missing in the mobile version, even after using the list-style-type: circle commands in the CSS. While I can manually insert circle bullets before each list item, this solution seems more like a temporary fix rather than a proper resolution.