I'm having trouble with the HTML codes for "main" in relation to media queries. I want the content to only show on viewports smaller than 480px, but it's not working as expected. The browser seems to hide the content on all viewport sizes.
Here's the CSS media query code:
@media only screen and (min-width: 481px) {
main { display:none;}
}
Below are the HTML codes. The "paragraph" class is used for alignment and font styling. Note that the opening and closing <main> </main> tags are not displayed here, just their content.
`
<p class="paragraph">
At Durango Jewelry and Gem Shop, we offer unique wire-wrapped pendants and gems inspired by natural geometries and the beauty of nature.
</p>
<p class="paragraph">
The featured pendant includes:
<ul class="paragraph">
<li class="listing"> <span style="color:red;">"Smoky Quartz"</span> gemstones, also known as <span style="color:red;">"Soulmate Crystal"</span></li>
<li class="listing"> Over 2 carats gemstone weight</li>
<li class="listing"> High-quality silver alloy requiring minimal polishing</li>
</ul>
</p>
<p class="paragraph">
Visit our store today!
</p>
}