I am trying to add a media query which contains min. It's not working in safari browser.
#media (min-height: 568px) and (max-height: 568px) and (min-width: 320px) and (max-width: 320px) {
#exe {
width: 100px !important;
}
}
Above code is working fine in chrome browser. But no idea why it's not executing in safari mobile mode.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
Already added the above meta tag as well. Any idea to solve this?
Related
I don't know what else I could do but for some reason, the responsive does not work on mobile!
When I resize my browser it works fine but on my iPhone X, there is no change...
I have this already on my <head>:
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
Here is a snippet of my CSS:
//I have this setting for browser resize and it works fine:
#media screen and (max-width: 700px){
*Style*
}
#media screen and (max-width: 700px){
*Style*
}
//And here for iPhone but it doesn't work at all
#media only screen
and (min-width: 375px)
and (max-height: 812px)
and (orientation : portrait) {
*Style*
}
I have problem with media queries (first time use).
http://swiatek.org.pl/-2/
They are working when I'm changing browser window, but when I'm looking inspect toggle device toolbar on chrome media queries doesnt work :(.
CSS: http://swiatek.org.pl/-2/main.css
replace
#media screen and (max-width: 1000px)
with
#media only screen and (max-width: 1000px)
and replace
#media screen and (max-width: 880px)
with
#media only screen and (max-width: 880px)
add the word "only" when declaring media screens.
#media only screen and (max-width: 880px) {
#first header{
font-size: 55px;
}
}
You can learn more about it here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You are missing the meta tag, add this in your header.
<meta name="viewport" content="width=device-width, initial-scale=1">
I am less confused to make a website only for mobile and tablet not a desktop. I need to know only one thing.
Should I use <meta name="viewport" content="width=device-width, initial-scale=1"> and define #media only screen for specific device?
Yes, however your website still will be accesible from other devices.I can explain it for you:
Using tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
It will adjust webpage width to match device width and set initial scale to 1 (no zooming). So for example, if you open this page using iPad, web browse will display page in 1024x768 (landscape) or 768x1024 (portrait).
initial-scale=1
This will force to display webpage with zoom set to 1.
Using media queries CSS3 you can set different CSS styles for different devices:
Styles for Tablets
#media screen and (min-width: 768px) and (max-width: 1024px) {
/* Styles for tablets */
}
Styles for Desktop
#media screen and (min-width: 1025px) and (max-width: 1280px) {
/* Styles for Desktops */
}
Problem
Css media queries are not working well in Smartphones and Phablets, but are working quite well in emulators. The problem is that the media queries are miss matching. for example my phone screen size is 320px but it applying 720px css.
Maybe
What I thing the problem arise due to absence of "(min-device-pixel-ratio : 1.5)". but i have no idea what is it and how to use it..
The Website
Hava look at the website | AtDrive.com
#media only screen and (min-width: 480px) and (max-width: 619px)
#media only screen and (min-width: 320px) and (max-width: 479px)
#media only screen and (min-width: 250px) and (max-width: 319px)
#media only screen and (max-width: 249px)
This is meta tag to your page.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Have a look some media queries
http://mediaqueri.es/
My mobile version (max-width : 479px) does not show #111 for the background color. Instead, #000 appears as the background color. Please help me.
#media only screen and (max-width: 1024px) {
body{
background-color:#ff0000;
}
}
#media only screen and (max-width: 767px)
{
body{
background-color:#000;
}
}
#media only screen and (max-width: 479px)
{
body{
background-color:#111;
}
}
In the head of your document, make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you omit this, then many devices will scale the page to fit the viewport.
Do you have a viewport meta tag specified? I'd suggest changing 479 to 480 too.
Here's an example of a viewport meta tag - this is the one I use on my own responsive website.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Try using device width rather than just screen size. Many mobile / tablet devices will open pages in an overview thus screen size will be ignored.
Also some mobile devices will respond to the #media handheld selector.
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
/*Ipad*/
#media only screen and (min-device-width : 320px) and (max-device-width : 480px)
/* Smartphones (portrait and landscape)*/
#media only screen and (-webkit-min-device-pixel-ratio : 1.5)
/*Iphone 4*/
#media only screen and (min-device-pixel-ratio : 1.5)
/*Iphone 4*/
#media handheld and (max-width: 960px)
/*handheld*/
Check in tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I had the same problem, but changing #media (max-width: 400px) with #media (max-device-width: 400px) worked for me, hope it helps you
Maybe you can specifiy by using
#media only screen and (min-width:768px) and (max-width: 1024px) {}
because if a screen is 200px in width it would comply to all the other rules it's not exceeding their width
Why not use Twitter Bootstrap?
http://twitter.github.com/bootstrap/