I have 2 buttons on my website that have the same class of .ow-button-base. What I'm trying to do is make it so that one of these buttons does not appear when the website is loaded on a mobile device. This is the code that I'm using now:
#media screen and (max-device-width: 640px) {
.ow-button-base {
display: none;
}
}
When I use this BOTH buttons do not appear when the website is loaded on a mobile device. How do I make it so only one does not appear?
Simply add to one of the button (which you want to show on mobile device) ID, f.e my_button2:
#media screen and (max-device-width: 640px) {
.ow-button-base {
display: none;
}
#my_button2 {
display: block;
}
}
And your buttons:
<button class="ow-button-base" />
<button class="ow-button-base" id="my_button2" />
Then the second button will be shown also for mobile device.
If you'd like them to have the same class, use a selector that will find a specific instance:
#media screen and (max-device-width: 640px) {
.ow-button-base:nth-of-type(2) { // select the second instance
display: none;
}
}
You could target it using the :last-of-type blocker.
#media screen and (max-device-width: 640px) {
.ow-button-base:last-of-type {
display: none;
}
}
Related
I can't figure out how to hide the logo image for mobile devices which is used for the background for my Age Verification popup. Here is the site with the pop-up logo in question: http://rocketcannabis.com/?itro_preview=yes
I got pretty close with the following code, but don't know how to isolate the image, I could only hide the whole pop with the #itro_popup class, I want just the image to hide on mobile, not the whole pop-up:
#media only screen and (max-width: 768px) {
#itro_popup {
display: none;
}
Use background-image: none
#media only screen and (max-width: 768px) {
#itro_popup {
background-image: none;
}
Try adding !important to display:
#media only screen and (max-width: 768px) {
#itro_popup {
background-image: none !important;
}
I have sass code that generates a negated media query as follow (based on Exact NOT(Inverse) of CSS Media Query):
#media not screen and (max-width: 420px) {
.phone {
display: none;
}
}
#media not screen and (min-width: 421px) and (max-width: 992px) {
.tablet {
display: none;
}
}
Why doesn't this work for the last div with combined classes?
<div class="phone">visible on: phone</div>
<div class="tablet">visible on: tablet</div>
<div class="phone tablet">visible on: phone and tablet</div>
The reason I'm inverting the logic is because if I would do it the other way around (showing instead of hiding). I wouldn't know what display type each element would be (block, inline, etc) and I can't set it back to it's previous value.
Example and source.
<div class="phone tablet"/> cannot be visible any time, because all time at least one of your 2 media queries are matched, so this div gets a display: none from at least one of those.
One solution would be
#media not screen and (max-width: 420px) {
.phone:not(.tablet) {
display: none;
}
}
#media not screen and (min-width: 421px) and (max-width: 992px) {
.tablet:not(.phone) {
display: none;
}
}
Update to your Fiddle.
If you also want the div in question be hidden if both, .phone and .tablet are hidden, add
#media not screen and (max-width: 992px) {
.phone.tablet {
display: none;
}
}
Another update to your Fiddle.
I Have this simple media query to check resolution of browser and accordingly display or hide the image... But it works only on Chrome and does not work on firefox and IE. any idea whats wrong with my code? or any suggestions what can I do?
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:block;
}
}
Here is my HTML:
<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div>
Without seeing your html I will assume that you are attempting to hide an image with and id of image? If so I would do the following.
Change the id of img to be a class, for example we will use .image-class this will mean the style can be re-used on other images on the page as IDs have to be unique.
So your html should look similar to this:
<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" />
And then for your CSS:
/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/
.image-class {
display: none;
}
/* Images will display above 1030px */
#media screen and (min-width: 1030px) {
.image-class {
display: block;
}
}
See this fiddle
try display:inline-block;
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:inline-block;
}
I am currently creating a responsive web design using media queries. For mobile devices I want to remove my JS slider and replace it with something else. I have looked at .remove() and a few other things from the JQuery library, however these have to be implemented into the HTML and I cannot think of a work around from the css angle.
Do you need to remove them, or just hide them? If just hiding is okay, then you can combine media queries with display:none:
#mySlider{
display: block;
}
#media (max-width: 640px)
{
#mySlider
{
display: none;
}
}
You can hide an element and show another depending on screen size using media query from css , this is from one of my live projects (I use this to show/hide icon)
#media only screen and (max-width: 767px) and (min-width: 480px)
{
.icon-12{ display:none; } // 12 px
.icon-9{ display:inline-block; } // 9px
}
Not a 100% sure what you mean. But I created a class "no-mobile" that I add to elements that should not be shown on mobile devices. In the media query I then set no-mobile to display: none;.
#media screen and (max-width: 480px) {
.nomobile {
display:none;
}
}
You can also use jquery function addClass() and removeClass() or removeAttr() to fulfill your purpose.
Example:
$(window).resize(function(){
if(window.innerWidth < 500) {
$("#slider").removeAttr("style");
}
});
Or you can also use media query as follow :
#mySlider{
display: block;
}
#media (max-width: 500px)
{
#mySlider
{
display: none;
}
}
I've got some CSS and media queries which hide and show my navigation:
So by default the navigation is:
nav {
display: inline;
}
Then using media query I hide it:
#media only screen and (min-width: 480px) and (max-width: 767px) {
nav {
display: none;
}
}
All works perfectly well, I then have some JavaScript hooked up to a button to show and hide the navigation when the media query is in effect.
However when I resize the browser back to full screen, larger than 767px the navigation does not reappear. How can I get the navigation to appear for desktop users?
bind the jquery resize handler to the window like this
$(window).resize(function(e){
if($(window).width() > 767){
$('nav').show()
} else {
$('nav').hide()
}
})
there is probably a few optimisations you can do with caching objects but this should get you want you need to start with
#media all and (min-width: 768px) {
nav
{
display: inline!important;
}
}
Kai Qing's answer helped me realise that I just needed to override the inline CSS the jQuery .toggle event was adding - Inside the correct media query of course.
You can make the js add a class to the nav and use !important to overwrite the media query statement...
nav {
display: inline;
}
.force_display{
display:inline !important;
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
nav {
display: none;
}
}
just add force_display class in the js function (assuming you're using jquery)...
$('#button').on('click', function(){
$('nav').toggleClass('force_display');
});