hide div tag on mobile view only?
Set the display property to none
as the default, then use a media query to apply the desired styles to the div when the browser reaches a certain width. Replace 768px
in the media query with whatever the minimum px value is where your div should be visible.
#title_message {
display: none;
}
@media screen and (min-width: 768px) {
#title_message {
clear: both;
display: block;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
}
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { #title_message { display: none; }}
This would be for a responsive design with a single page for an iphone screen specifically. Are you actually routing to a different mobile page?
The solution given didn't work for me on the desktop, it just showed both divs, although the mobile only showed the mobile div. So I did a little search and found the min-width option. I updated my code to the following and it works fine now :)
CSS:
@media all and (min-width: 480px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
@media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
HTML:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
You will need two things. The first is @media screen
to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden
attribute. Once the browser/screen reaches 600pixels then #title_message
will become hidden.
@media screen and (max-width: 600px) {
#title_message {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
EDIT: if you are using another CSS for mobile then just add the visibility: hidden;
to #title_message
. Hope this helps you!