I'm working on a HTML site and adding a mobile menu. I was able to add the menu but having trouble with the button that opens that menu. This is what I have.
<a id="simple-menu" href="#sidr">
<img class="hidedesktop" src="img/menu-icon.png" alt="Menu">
</a>
And when I press the image it opens the menu. I need it to remove this from the page on desktop and show on mobile. I've been doing some research and found that
display:none;
should work in the #media but I tried and wasn't able to set this up correctly. Can anyone tell me what I'm doing wrong? Below is my CSS for hide desktop.
.hidedesktop{
display:block;
}
and CSS for #media remove on desktop
/*#media only screen and (max-width: 768px) {
.hidedesktop{
display:block;
}
}
#media only screen and (min-width: 768px) {
.hidedesktop{
display:none;
}
}
}
*/
I would like to also hide the main menu on the mobile version but if I get help with this I think I'll figure that out.
You only need min-width for it.
#media only screen and (min-width: 768px) {
.hidedesktop {
display:none;
}
}
Or to use min-device-width if you want (unlikely), make sure to check out the link below if you're not sure about it.
#media only screen and (min-devide-width: 768px) {
.hidedesktop {
display:none;
}
}
Read here to learn the differences
Related
I have a less file containing a simple css class that needs to have different styles applied for various screen sizes. The following code only works on desktop (the first #desktop media query). Nothing happens for mobile. I have tried many variations of this syntax with no luck and haven't found anything about this in the docs. You can also see the live demo here (notice how if you stretch the screen wider than 1024px the div turns orange, but it does not turn red or green when smaller than 1024px as it should). Thanks.
html
<div class="derp">
Hello
</div>
less
#desktop-min-width: 1024px;
#phone-max-width: 768px;
#desktop: ~"only screen and (min-width: #{desktop-min-width})";
#tablet: ~"only screen and (min-width: #{phone-max-width}) and (max-width: #{desktop-min-width}";
#phone: ~"only screen and (max-width: #{phone-max-width})";
#appHeight: 749px;
#appWidth: 421px;
.derp {
#media #desktop {
background-color: orange;
}
#media #tablet {
background-color: red;
}
#media #phone {
background-color: green;
}
}
There is a problem with
#tablet: ~"only screen and (min-width: #{phone-max-width}) and (max-width: #{desktop-min-width}";
Remove it for a moment, and you will see green background is displayed for phone screen.
You need to add ")" for a #tablet at the end
I want to show a hyperlink only for phone users and not desktop users. Is this the way to do it?
#media screen and (min-width: 480px)
{
<a href="xxxxx"> Test <\a>
}
No. You don't want to add HTML to the CSS, it won't work.
The HTML:
<a class="formobile" href="0000000"> Phone # </a>
The CSS:
a.formobile { display: none; }
#media screen and (min-width: 480px) {
a.formobile { display: block; /* or display: inline-block; or display: inline; depending upon surrounding markup */ }
}
Create the link in your HTML page
Target it with device width specifically to show on those resolutions and mobile devices.
Note that I used min-device-width as opposed to min-width. Use what is suitable for your project.
Something like this
a.mobile-only {display: none;}
#media screen and (min-device-width: 480px) {
a.mobile-only {display: inline;}
}
I've got a problem which I have no idea how to get around of.
I use a shop script where I can only edit CSS file.
I have a div with background-image and in there I have a normal image:
<style type="text/css">
.someclassforcss img{
some:attributes;
}
.someclassforcss {
background-image:url(/link.png);
}
</style>
<div class="someclassforcss">
<img src="/link2.png">
</div>
Everything's good, but I want to use media queries (or any other method) to hide background-image of div for mobile devices, but I have no idea how to make it, because media queries doesn't work for specific attributes, only for whole elements, so if I would've hided the div, my img is also hided which i don't want.
You DO can change attribute regarding media dimensions.
Your CSS:
.someclassforcss {
background-image:url(/link.png);
}
#media screen and (max-width: 762px){
.someclassforcss {
background-image: none;
}
}
Try this:
#media only screen and (max-width: 767px){
.someclassforcss {
background: none;
}
}
You can hide the div with a media query. eg:
#media (max-width: 600px) {
.someclassforcss {
display: none;
}
}
or if you just want to remove the background image:
#media (max-width: 600px) {
.someclassforcss {
background-url: none;
}
}
I have written media queries in this order. But some of my html code is not working, which does not have any relation with this media queries. A html button disabled in responsive view. But after deleting the media queries it is working fine. I have checked the code, all the brackets are closed properly. Is there any strict rule that should follow while writing media queries?
#media all and (max-width:1200px) {
}
#media all and (max-width:992px) {
}
#media all and (max-width:768px) {
}
#media all and (max-width:480px) {
}
#media all and (max-width:320px) {
}
Some possibilities
If you have absolute positioning to button, you can try removing it
Position button according to device width in responsive view
Check if another div or element is overlapping button
Using the #media tag, how do I display a new image, for example I have a logo I want to use for my main site and a mobile logo for my mobile site, how to I display the smaller logo only on the mobile site using #media?
I've tied using "display:url('xxxx') but that hasn't seemed to work.
You'll have to put two logos on your HTML, like this:
<img src="" class="desktop-logo">
<img src="" class="mobile-logo">
Then, you'll have to hide the mobile-logo by default:
.mobile-logo {
display: none;
}
Then, on your media query, you'll have to hide the desktop-logo and show the mobile-logo:
#media screen and (max-width: 480px) {
.desktop-logo {
display: none;
}
.mobile-logo {
display: block;
}
}
What you'll want to do is create an element and set a background on it. You'll use #media control what the background image is based on the size of the window.
#media only screen and (min-width: 768px) {
.logo {
background: url('image.jpg');
}
}
#media only screen and (max-width: 767px) {
.logo {
background: url('imagesmall.jpg');
}
}
And this is what your element would look like.
<div class="logo"></div>
Create a tag with a class then use mediascreen to apply new styles to said class
create a div tag
css/
#media screen .... etc {
.image {background-image: url('wwww....');
}
So, when the exact pixels are reached at the screen it will apply a backround image to that image class I created above.