html - 缩小屏幕时不显示文字

Question

我正在尝试制作一个响应式网站，当我缩小屏幕但它没有显示时让 h3 显示。这是我的代码:

@media only screen and (max-width: 1486px) 
{ 

.resptekst
{
    visibility: visible;
}

}

.resptekst
{
    visibility: hidden;
}

HTML

<div class="tekst">
                    <h3 class="resptekst">Contact</h3>
</div>

当我缩小屏幕时，文本需要显示，当屏幕足够大时，文本应该不可见。

Answer 1

改变CSS位置

css 从上到下渲染

.resptekst
{
    visibility: hidden;
}

@media only screen and (max-width: 1486px) 
{ 

.resptekst
{
    visibility: visible;
}

}