Currently, your max-width media query is causing display:none to be applied when the document reaches a width of 980px, rather than at exactly 980px.
It seems like you actually want the opposite behavior, which is why switching from max-width to min-width might be the solution for you.
Alternatively, you could set your element to display: none outside of the media query and use display: block within the max-width media query.
CSS
/* Applies when screen width is 980px or less */
@media (max-width: 980px) {
.welcome-msg {
display:none;
}
}
/* Applies when screen width is 980px or greater */
@media (min-width: 980px) {
.welcome-msg {
display:none;
}
}
/* Solution using max-width - consider min-width as well */
.welcome-msg {
display:none;
}
@media (max-width:980px) {
.welcome-msg {
display:block; /* Element will only show up if width is less than or equal to 980px */
}
}
If this doesn't align with your goal, providing a Codepen example would help us give more tailored advice.
Best of luck!