I'm making a website using HTML5 & CSS3. It needs to be responsive, so I'm making use of mediaqueries. I have set the following:
#media screen and (min-width: 1024px) {
#hamburger {
display: none;
}
#desktop-nav {
display: inline;
}
}
It works fine in all browsers, except firefox (latest version). It already executes on 800 & something.
Anyone any idea?
Thanks!
Related
Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>
I am using below LESS to target mobile phones and all other devices are working, but Window phone position: relative breaks the whole UI.
li {
#media screen and (max-width: 480px) {
position: relative;
top: 4px;
zoom: 0.5;
width: 46px;
}
}
How can I target only windows phone specifically using media queries.
I have been through below solutions, but they are using conditional CSS tag and my project uses LESS.
CSS to target Windows Phone 7
And below solution targets dpi, that probably might change in future devices. Hence this does not solve my problem.
#media query to target hi-res Windows Phone 8+?
Thanks Zitscher for your inputs.
But I found a hack that worked for me
http://blog.simian.co/en/tips/internet-explorer-10-mobile-css-hacks-windows-phone/
(this may be helpful to someone)
#media screen and (-ms-high-contrast: active) and (max-width: 30em),
(-ms-high-contrast: none) and (max-width: 30em) {
width: 130px !important;
padding-left:18px !important;
}
This is what I was looking for.
Thanks for your help.
I wouldn't rely solely on media queries when applying styles for a certain device. Try using the check library is.js (http://is.js.org/#windowsPhone) like in this example:
if(is.windowsPhone()) {
$('body').addClass('is-windows-phone')
}
Now in your styles you could do something like this:
body.is-windows-phone ul#fancyWindowsPhoneList li {
position: relative;
top: 4px;
zoom: 0.5;
width: 46px;
}
Hope this helps!
I have issues with my media queries. It seems like they do not work in either browser. I tried in Opera, Chrome, Firefox. This is the page http://amatalents.com/about-us.html and those are media-queries for main div section
#media screen and (min-width: 150) and (max-width: 400) {
.windows div {
width: 100%;
display: table-column;
}
.windows div a {
font-size: 10px;
color: green;
}
.windows {
background-color: red;
}
}
I also validated the css file and first time it did fine and only mentioned the css parser error reffering to media queries part of the file, but the second time it referred to media queries only without mentioning parser error.
I am lost...
Please help!
You are missing px.
#media screen and (min-width: 150px) and (max-width: 400px)
I'm using this media query in my main css stylesheet and it doesn't seem to be working.
#media only screen and (max-device-width : 768px) {
.small { display: block; }
.big { display: none !important;}
}
In the web inspector it doesn't even show up as a rule, however when i look in the sources panel the query is obviously there. So i'm not sure what the problem could be. I am trying to target devices with a width less than 768px.
Here's how i'm linking to the stylesheet, if that matters
<link rel="stylesheet" media="screen" type="text/css" href="{site_url}interface/style.css" />
As you are using max-device-width it won't affect in web browsers, You should check on mobile browsers to see its working or not.
Or if you want to check on web browsers, Then use just max-width instead.
See Working Demo
CSS
#media only screen and (max-width : 768px) {
.small { display: block; }
.big { display: none;}
}
I'm using html5 template with responsive layout and it works just fine (in all major browsers).
I'm using wide, 728px ad (google adsense) in the header, and I would like to hide it, when viewport width is less than 728px. So I modified the css file - added
#media screen and (max-width: 728px) {
.responsiveBanner {
display:none;
}
}
to the end of file. Everything works perfect in firefox and chrome. But IE10 doesn't hide the banner, when changing the window width.
modified code:
#media screen and (max-width: 728px) {
.responsiveBanner {
display:none;
}
body {
background:yellow;
}
}
also doesn't hide the banner in IE, however, the background change is applied...
Do you have ayn idea, why IE doesn't hide the banner?
Thanks
IE has a few well known bugs, one of which is the one you've encountered.
try visibility:hidden;