I am attempting to include text that is only visible in Mobile View as a replacement for my logo. Below is the code I am using:
CSS:
@media only screen and (max-width:1024px) {
header .logo {
display: none;
}
header .logo a {
display: none;
}
}
@media only screen and (max-width:768px) {
header .logo {
display: none;
}
header .logo a {
display: none;
}
}
@media only screen and (max-width:600px) {
header .logo {
display: none;
}
header .logo a {
display: none;
}
}
@media only screen and (max-width:400px) {
header .logo {
display: none;
}
header .logo a {
display: none;
}
}
.mobileShow {
display: none;
}
/* Smartphone Portrait and Landscape */
@media only screen and (max-device-width: 768px) and (max-device-width: 600px) and (max-device-width: 400px) {
.mobileShow {
display: inline-block;
top: 40px;
left: 0px;
right: 0px;
}
}<header class="main-header">
<div class="row">
<div class="logo animated bounce">
<a>Game Ware</a>
</div>
</div>
<div class="mobileShow">
<h1 style="text-align: center; font-size: 40px;">GAME WARE</h1>
</div>
</header>View the mobile site here: http://mobt.me/zgly
View the full site here: https://i.sstatic.net/DoAQm.jpg
The text "Game Ware" intended for mobile view is currently not showing, but it does appear in the normal view. The goal is to have it visible exclusively in Mobile View and hidden in the standard view.
Your assistance is greatly appreciated! What corrections should be made in this code?