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!
Related
i have a website done in html and css, I have used media query coz in mobile view one row in my website was showing wrong alignment, so id did the following code for mobile devices:
#media only screen and (max-width: 600px) {
#zayan {margin-left: -20%;}
#amir {margin-top: -20%; width: 100px;}
#amir h5 {font-size: 12px; margin-left: -40%;}
}
now I checked this in my redmi note 8 mobile and it was showing perfect, but when i checked it in my redmi 7 and another device its coming wrong,
can anyone please tell me what could be wrong here. thanks in advance
I've tried it on my devices and I hope this works for you
#media all and (max-width: 600px) {
#zayan {margin: auto; }
#amir h5 { font-size: 12px; }
#amir { margin-top: -20%; }
.card-body{ padding: 0px !important; }
}
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'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!
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)
Attention: Possible duplicated from here (and I found more answers with the same solution) but it does not solve my problem.
Hello, I want to change color of some element when size of screen is different, here is my CSS rules they will told you all I hope:
#my_div {
height: 5px;
background-color: #08c5ef;
width: 100%;
}
#media only screen and (max-width: 1100px) {
#my_div {
background-color: red;
}
}
#media only screen and (min-width: 1200px) {
#my_div {
background-color: green;
}
}
It works in all browsers except Safari(5.1.7), the line always green. Can somebody help me? Maybe I wrote wrong media queries?
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such mediatype as "only", the style sheet should be ignored by older browsers.
Safari(5.1.7) is quite old now, we are up to 8.0.5
this is 1 possible explaination