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
Related
I'm trying to write some css that will only work in firefox, that is within a media query so it only works after 767px. Below is what I've currently written but it doesn't work.
#media only (min-width: 767px) {
#-moz-document url-prefix() {
.SearchBlock input {
width:88% !important;
}
}
}
It works just fine without the "#media only" section, but I only want it to work after 767px. Is this possible?
Edit: Changed resolution to width.
Don't use min-resolution. Use
min-width: if you need to apply CSS to the devices which are more than 767px, and use
max-width: If you need to apply CSS to the devices having size less than 767px - for mobiles
Example:
#media screen and (min-width: 767px) {
#-moz-document url-prefix() {
.SearchBlock input {
width:88% !important;
}
}
}
Hope this helps!
You are not getting the result because you are using min-resolution correctly.
You can do one of the 2 :
Either change min-resolution to min-width
Enter resolution value in min-resolution for example min-resolution(192dpi)
Px is not the unit of resolution.
Change min-resolution to min-width.
Resolution is for the pixel density of the device. width refers to the actual width which is what you want.
The url-prefix portion needs to have the url of the document the style rules refer to, such as
url-prefix("https://example.com/")
The #document CSS at-rule restricts the style rules contained within
it based on the URL of the document.
https://developer.mozilla.org/en-US/docs/Web/CSS/#document
Try this. Should work! :)
.SearchBlock input {
display: block;
width: 30%;
}
#-moz-document url-prefix() {
#media screen and (min-width: 767px) {
.SearchBlock input {
width:88% !important;
}
}
}
<div class="SearchBlock">
<input type="text" placeholder="text"/>
</div>
Is there a way in AngularJS to show / hide a div depending on the browser with?
Here is some pseudo-code:
if (width < 750px)
ng-hide
I hope you got my intention. :-)
Due to accessibility issues, I don't wan't to use this jquery code:
#media (min-width: 500px) and (max-width: 600px) {
myelement {
display: none;
}
}
This does just hide the html-element, I wan't to remove it from the DOM.
I am thankful for any help I can get on this issue.
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
So I'm using two media queries on my page:
<link rel="stylesheet" media="screen and (max-device-width: 1099px)" href="./src/css/narrow.css" />
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="./src/css/main.css" />
The main.css one loads by default, but when the browser is re-sized below 1100px, it simply loads no stylesheet, therefor the entire page renders no styling.
Anybody have any clue what I'm doing wrong? Also, isn't it possible to use media queries inside of "main.css"? So I can only alter certain elemnts based on browser width, instead of loading a whole new stylesheet? Thanks much guys :)
Yep you can do this all in the main stylesheet, so something like this:
#media only screen and (max-width: 1099px){
/* css here */
}
#media only screen and (min-width: 1100px){
/* css here */
}
Actually I also noticed you had max-device-width: on so this will only target ipads/iphones etc which is probably why you weren't seeing this stylesheet on the desktop
The alternative is to use Javascript/Jquery to detect the screen size and load a different stylesheet based on that screen size, but Adam's solution is probably better unless you need to separate your style sheets for a particular reason.
This article will give you all the information you need using jquery - http://css-tricks.com/resolution-specific-stylesheets/
You can also use multiple queries - I make a new one every time I fine a width that doesn't look quite right.
#media (max-width:319px) {
// styles
}
#media (min-width:320px) and (max-width:479px) {
// styles
}
#media (min-width:480px) and (max-width:479px) {
//styles
}
etc..., etc...
I'll also usually built the queries on each element that needs them. I find that when you put ALL your rules for the a media query in one section of your stylesheet things get confusing to maintain.
For example:
div.box {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...
Then on another element that needs resizing I'll do the same thing:
div.otherbox {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...
I understood how I change CSS via media queries (such as media="screen and (max-width:640px)")
but let's say I want to write (just for example)
<div>
[if screen resolution is lower then 960 px]
<div>
some new text only for lower resolution
</div>
[end of condition]
</div>
What is the condition I need to write to get it right?
As far as i have experienced, you cannot do media queries inside HTML pages. You need to do it from within your CSS.
But if you want to show some special text only when it is below a certain resolution, why not only make it visible when the resolution is lower than 960px?
Creating responsive designs is very different from a regular design, because you have to think a lot more (which is haaard)
you can check it via using javascript screen object :
screen.width
or you can do this with css
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
http://css-tricks.com/6206-resolution-specific-stylesheets/
http://www.javascriptkit.com/howto/newtech3.shtml
I am actually going through the same situation and found that if you want to do this you could really add all the text in the HTML page, and then hide it on screen widths that you don't want it to show. For example:
<div>
[text that will be shown for screens less or equal to 960px in width]
<div class="smallScreen">
some new text only for lower resolution
</div>
[end of condition for small screens]
[text that will be shown for other screens that are greater in width]
<div class="largeScreen">
some new text only for higher resolution
</div>
</div>
And then you could add CSS:
/* On smaller resolutions, hide the text for Large screens */
#media only screen and (max-width: 960px) {
.largeScreen {display: none;}
}
/* On larger resolutions, hide the text for Small screens */
#media only screen and (min-width: 960px) {
.smallScreen {display: none;}
}
I hope this works out fine :)
You need to assign an id (or a class or any other way of finding your element from CSS) to the <div> and then you can set a media query definition like this:
<div id="mydiv">...</div>
<style type="text/css">
#media screen and (min-width: 961px) {
div#mydiv { display: none }
}
</style>
Or for better readability: Make it hidden on default and visible if max-width: 960px.
I could be wrong, but I think css selection by resolution would need a little help from javascript.
Here is a quick example of what that js could look like, embedded in jquery:
$(document).ready(function() {
if ((screen.width>=1024) && (screen.height>=768)) {
alert('Screen size: 1024x768 or larger');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect1024.css"});
}
else {
alert('Screen size: less than 1024x768, 800x600 maybe?');
$("link[rel=stylesheet]:not(:first)").attr({href : "detect800.css"});
}
});
Hope that helps.
You can add jQuery function to change style dynamically as per scree resolution.
if(screen.width==1600)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.7%');
}
else if(screen.width==1280)
{
jQuery('#hb-gotop').removeAttr("margin-left", "-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -0.9%');
}
else if(screen.width==1024)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.1%');
}
else if(screen.width==800)
{
jQuery('#hb-gotop').removeAttr("margin-left","-0.9");
jQuery('#hb-gotop').attr('style', 'margin-left: -1.3%');
}
Answere was helpful from:
if screen resolution is less than x append css
You can do this entirely with CSS 3 using the #media command.
**#media (max-width:960px) { css... } //nothing with screen size bigger than 960px
#media (min-width:960px) { css... } //nothing with screen size smaller than 960px**
Jason Whitted makes a good point, this is CSS 3 only, so it won't work with older browsers (it should work with all modern browsers though).
You can as well do screen or device edit
#media screen { .nomobile { display: block; } } //desktops/laptops
#media handheld { .nomobile { display: none; } } //mobile devices
Or you could assume mobile devices will have a smaller width, and go on that.