Hi guys, i have this HTML code
<div id="arrow-down"> </div>
the code works fine and i styled the <DIV> using css on a file named
custom.css.
Here is the styling code;
div#arrow-down {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 40px solid #2e3192;
margin: 0% 46%;
}
The CSS code works fine, it creates an arrow facing down. the problem comes in the following code
@media all and (max-width: 768px) {
div#arrow-down
{
display: none !important;
}
}
i want to make the arrow(div) to not display when being viewed on mobile devices. The code seems to work when i test it on the browser (developer tools) but for some reason the code does not work when i save it in the
custom.css file, the arrow is still visible.
What I have tried:
Here is a list of alternate codes that i tried out
@media all and (max-width: 768px) {
div#arrow-down
{
visibility: collapse !important;
}
}
@media all and (max-width: 768px) {
div#arrow-down
{
visibility: hidden !important;
}
}
@media all and (max-width: 768px) {
div#arrow-down
{
border-top: 0px solid #2e3192; !important;
}
}
all these codes work when i test it on the browser (developer tools) but not when i save it in the
custom.css file.
what am i missing?