In a Web Page I want a button should hide in tablet view but it should show in desktop OR laptop view..
I used media Query but what if size are same?
The Problem is I have same size of Laptop and Tablet now how can i do it.....
In a Web Page I want a button should hide in tablet view but it should show in desktop OR laptop view..
I used media Query but what if size are same?
The Problem is I have same size of Laptop and Tablet now how can i do it.....
You can use height
& width
like
@media only screen and (max-width: 1024px) and (max-height:768px) {
.your-class{display:none}
}
Or Your tablet is retina display you can write this way
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }
One way to do it is with PHP. Look at the HTTP_USER_AGENT and if it is a tablet, you can not display the HTML.
You can detect the operating system in javascript by using window.ui.os
and then call a javascript function to hide the button.
please use this media query I hope its working into your code...
@media screen and (min-width: 991px) {
.btn {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
@media screen and (max-width: 600px) {
.btn {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
<input type="button" value="button1" class="btn" />