I want to be able to remove this:
<div id="mail1">
<li>
<i class="glyphicon glyphicon-envelope" aria-hidden="true"></i>
support#mywebsite.com.au
</li>
</div>
When a device is smaller than 600px.
I would suggest using a class instead of assigning the property to an id. This will help you use this class to multiple components which you want to hide on a screen having width less than 600px.
#media only screen and (max-width: 600px) {
.desktop-only {
display: none;
}
}
<div id="mail1" class="desktop-only"><li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i>support#mywebsite.com.au</li></div>
Use media query and then use display none.
#media only screen and (max-width: 600px) {
#mail1 {
display: none;
}
}
I see most answers on here using max-width: 600px but if you truly want to hide it under 600px, you should use 599px like this:
Desktop-First CSS
#media only screen and (max-width: 599px) {
#mail1 {
display: none;
}
}
If you want to use mobile-first CSS, you can code it like this instead:
Mobile-First CSS
#mail1 {
display: none;
}
#media only screen and (min-width: 600px) {
#mail1 {
display: block;
}
}
also can use this:
#media only screen and (max-width:600px){
#mail1 {
display: none;
}
}
Related
I'm trying to not display different input tags for different devices.
I have three input tags <input class="desktop"/> <input class='tablet'><input class= 'mobile'>
I'm not displaying desktop and mobile input tags by adding the css like this:
.desktop {
#media(max-width: 767px){
display: none
}}
.mobile {
#media (min-width: 768px) {
display: none;
}}
I'm having difficulty restricting it for tablet though. My tablet dimensions are between 768px and 1024 px
I've tried doing this but it doesn't work:
#media (max-width:768px) and (min-width:1024px) {
display: none;
}
Any ideas on how I can control the input tag to only show between these dimensions?
It's just a syntax error. You need to put the class selector inside the media query like this:
#media (max-width: 767px) {
.desktop {
display: none;
}
}
See this example on w3schools
edited The media query just has the max-width and min-width the wrong way round. See below
/* apply at widths below 768px */
#media (max-width:768px) {
body {
background-color: lightskyblue;
}
.tablet, .desktop {
display: none;
}
}
/* apply from widths between 768px and 1024px */
#media (min-width:768px) and (max-width:1024px) {
body {
background-color: goldenrod;
}
.mobile, .desktop {
display: none;
}
}
/* apply from widths above 1024px */
#media (min-width:1024px) {
body {
background-color: lightseagreen;
}
.mobile, .tablet {
display: none;
}
}
<input class='mobile' placeholder="mobile">
<input class='tablet' placeholder="tablet">
<input class='desktop' placeholder="desktop">
I am trying to create a click-to-call link in my webpage i have the following
<a class="mobile-only" href="tel:+534306464456"><p class="">Click Here to call us</p></a>
I want it to only display on mobile devices phones specifically
in my css i tried
#media (max-width: 991px) {
.mobile-only {
display:block !important;
}
}
.mobile-only{
display:none !important;
}
but it does not work is there a way to accomplish this?
.mobile-only {
display: none;
}
#media only screen and (max-width: 767px){
.mobile-only {
display: block;
}
}
This should work.
.mobile-only {
display: block;
}
#media screen and (min-width: 768px){
.mobile-only {
display: none;
}
}
Only move .mobile-only class to above to your media query, remenber that is cascading style sheet, this mean that media query will be place at the end of the file, or instead you can place .mobile-only inside of a media query that only affect desktop resolutions. By the way avoid using !important statement in your css.
.mobile-only{
display: none;
}
#media only screen and (max-width: 991px) {
.mobile-only {
display: block;
}
}
Other approach will be:
#media only screen and (max-width: 991px) {
.mobile-only {
display:block;
}
}
#media only screen and (min-width: 991px) {
.mobile-only{
display: none;
}
}
I have a div which I want to hide when the screen is mobile size. Currently I have
html
<div id='top-btn'>
<a class="fade-in" href="...">Top</a>
</div>
css
#top-btn a {
visibility: visible;
opacity: 1;
position: fixed;
...
}
#media screen and (max-width: 768px) {
#top-btn a { display: none; }
}
The div is hidden but the button is still there, so there's an area that still links (clickable). I want it to be completely gone so they can't click on it
You need to remove the whole button, rather than just the link itself:
#media screen and (max-width: 768px) {
#top-btn { display: none; }
}
Hope this helps!
For me the code works..without any changes.
Maybe your browser don't support #Media,
Here you can check what browsers support this command
Link: http://caniuse.com/#feat=css-mediaqueries
but before checking the link,try this..
#media screen and (max-width: 768px) {
#top-btn , .fade-in { display: none; }
}
Ive been looking all over and I cant find any solution to this. My media queries don't work on mobile devices but they work when I re size my screen.
YES I do have:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
In the head of my document.
Here are what my media queries look like:
#media only screen and (max-width: 1100px) {
.r-menu {
display:inline;
}
.m-menu {
display:none;
}
}
#media only screen and (max-width: 900px) {
.res-full {
width: 100%;
}
}
Thanks.
Here is the whole code: http://scratchpad.io/marvelous-holiday-5460
Replace only screen with all
#media all and (max-width: 1100px) {
.r-menu {
display:inline;
}
.m-menu {
display:none;
}
}
#media all and (max-width: 900px) {
.res-full {
width: 100%;
}
}
screen is used for computer screens whereas all is used for all media type devices
Do you really need to use "only"?
I found that the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Why don't you try removing it?
Found the mistake Use min-width not max-width
/*If screen is less than 900px don't show full menu*/
#media(max-width: 900px) {
.r-menu {
display:inline;
}
.m-menu {
display:none;
}
}
/*If screen is greater than 900px then show full menu*/
#media(min-width: 901px) {
.res-full {
width: 100%;
}
}
Use this css
#media screen and (max-width: 1100px) { .r-menu {
display:inline;
}
.m-menu {
display:none;
}}
#media screen and (max-width: 900px) {
.res-full {
width: 100%;
}}
working all devices & screens
I'm trying to hide a certain image for mobile devices on my website. I've tried a various of html and css code and i cannot get it to work. It might have something to do with my div class's and Id tags.
please can someone try and get it to work for me?
HTML:
<section id="left-sidebar">
<div class="logo">
<a href="#intro" class="link-scroll">
<img src="assets/images/other_images/logo.png" alt="description of image">
<img src="assets/images/other_images/nav.png" class="nav">
</a>
</div>
CSS:
#media (max-width: 600px) {
#left-sidebar .logo .nav {
display:none;
}
}
You have to use #Media screen:
screen Used for computer screens, tablets, smart-phones etc.
Combine it with pixel-ratio to fit your needs. Check more examples here
For example (for Samsung Galaxy S3):
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
#media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
{
// insert here your custom styles
#left-sidebar .logo .nav {
display:none;
}
}
<style>
.youClassname{display:inline;}
#media screen and (min-width: 320px) {
.yourClassname{
display:none !important;
}
}
#media screen and (max-width: 768px) {
.yourClassname {
display:none !important;
}
}
</style>
I run your HTML and CSS on JSFiddle. I just change your CSS to:
img {
display:none;
}
and got this
not sure if its this what you are looking for
This seemed to work for me, which was odd
#media (max-width: 768px) {
#left-sidebar .logo .nav {
display:none;
}
}
instead using display:none try this
#media (max-width: 600px) {
#left-sidebar .logo .nav {
display:hidden !important;
}
}
this code will work if isn't still not working please check device width and go on
<style>
.youClassname{display:inline;}
#media screen and (max-width: 320px) {
.yourClassname{
display:none !important;
}
}
#media screen and (min-width: 768px) {
.yourClassname {
display:none !important;
}
}
</style>