i want the green and red box to be smallere at mobile (iPhone): http://shop.cykel-expressen.dk/booking/
I thought this was the code, but it is not working, but isn't working)):
#media all and (min-width:321px) and (max-width: 480px) .dopsp-body { .dopsp-body height: 50xp }
You are missing { after the (max-width: 480px)
#media all and (min-width:321px) and (max-width: 480px) {
.dopsp-body { height: 50px }
}
You can use media query for this.
#media screen and (max-width: 480px){
//Reduce the size of green and red box here
}
You are using wrong method, try to this.
#media only screen and (max-width: 479px) {.dopsp-body {height: 50px }}
try first is for portrait second for landscape code is on http://stephen.io/mediaqueries/ has plenty of good snippets
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape) { /* STYLES GO HERE */}
Related
#media only screen and (min-width: 768px) and (max-width:1199px) {}
I want to put Media query only for safari browser for given Size of device.
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 768px) and (max-width:1199px) {
::i-block-chrome,.allsearch-in select{display:none;}
}
still not Working...
CSS Media Queries for iPads & iPhones
iPad in portrait & landscape
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
iPad in landscape
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPad in portrait
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
Browser Specific Hacks
/* saf3+, chrome1+ */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#diez { color: red }
}
/* iPhone / mobile webkit */
#media screen and (max-device-width: 480px) {
#veintiseis { color: red }
}
ThankYou
Add Class for safari browser to determine browser name by javascript
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') == -1) {
alert("2"); // Safari
//add class to body tag
}
}
then use this class in css.
I have two different media queries, for iPhone and browser. But the iPhone don't work. The sequence is first browser and then iPhone in the style sheet. When i check the site on iPhone and inspect its shows the queries from browser, not from iPhone. What to do??
I saw this: iphone-6-and-6-plus-media-queries, But what i want is not there.
Browser:
#media only screen and (max-width: 640px) {
#my_div li a img { height: 51% !important; top: 19% !important;}
}
#media only screen and (max-width: 360px) {
.....
}
#media only screen and (max-width: 320px) {
.....
}
iPhone:
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
#my_div li a img { height: 31% !important; top: 14% !important;}
}
If you want to target Iphone 6 use;
#media only screen and (min-device-width : 375px) and (max-device-width : 667px)
add orientation only;
and (orientation : landscape) OR and (orientation : portrait)
For Iphone 6 plus use;
#media only screen and (min-device-width : 414px) and (max-device-width : 736px)
I think at your case -webkit-device-pixel-ratio is the reason of it not working.
where is the code for the iphone in the your css? because if it is above the code for the browser your browser code will write over it. if this is the case then you only need to turn it around.
In the code example below there are two cubes with styles for desktop and mobile.
on the iphone for example the cube should be green whereas on desktop it should be (and is) red.
On my iPhone in portrait view I get nothing, on landscape, it is red instead of green.
Same on the iPad.
On Google Chrome Developer Tools, when I choose Apple iPhone 5 Portrait, it doesn't show the media query in the Styles, as if it weren't recognising it or something.
What am I doing wrong?
/* for desktop */
#media only screen and (min-width: 400px) and (max-width: 767px) {
#block2 {width:100px;height:100px;background:red;}
}
/* for iPhone */
#media only screen and (min-device-width:320px) and (max-device-width: 767) {
#block2 {width:100px;height:100px;background:green;}
}
/* for desktop */
#media only screen and (min-width: 960px) and (max-width: 1024px) {
#block {width:100px;height:100px;background:red;}
}
/* for iPad */
#media only screen and (min-device-width:768px) and (max-device-width: 1024) {
#block {width:100px;height:100px;background:green;}
}
<div id="block"></div>
<div id="block2"></div>
There is a syntax error:
(max-device-width: 767)
(max-device-width: 1024)
to
(max-device-width: 767px)
(max-device-width: 1024px)
Try something like this.
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen and
(min-device-width: 320px) and (max-device-width: 568px) and
(-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
For more details - CSS-Tricks
I am using the following media queries as these happened to be the breakpoints:
#media only screen and (max-width: 1022px)
#media only screen and (max-width: 900px)
#media only screen and (max-width: 816px)
#media only screen and (max-width: 766px)
#media only screen and (max-width: 750px)
#media only screen and (max-width: 700px)
#media only screen and (max-width: 668px)
however on an ipad or smartphone (Phone resolution max width of 668px) it still displays the generic css but on a browser resize to the device resolution it shows correctly - Do I have to create device specific queries?
An iPad has a 1024x768px resolution, so naturally will not be targetted by any of those queries. Instead of using max-width, you should use max-device-width:
#media only screen and (max-device-width: 1022px)
#media only screen and (max-device-width: 900px)
#media only screen and (max-device-width: 816px)
#media only screen and (max-device-width: 766px)
#media only screen and (max-device-width: 750px)
#media only screen and (max-device-width: 700px)
#media only screen and (max-device-width: 668px)
Please use the viewport inside of head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
On mobile devices the viewport size is a bit more complicated then on desktop screens. By default they basically display the site in the "virtual viewport" that varies between 800-1000px in different browsers, and then scale it to fit the physical screen. See the classic article by Peter-Paul Koch: http://quirksmode.org/mobile/viewports2.html
Add like this it will work:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
For reference:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
#media only screen and (max-width: 668px) and (min-width:xxxpx)
need set min-width also.
Is this possible? It seems like a neat solution to me, but I'm not sure if it will work.
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Code for both portrait and landscape */
#media (orientation:portrait) {
/* Code for just portrait */
}
#media (orientation:landscape) {
/* Code for just landscape */
}
}
You should be able to nest #media rules this way in CSS3, but it isn't yet supported by most browsers. See this answer for details.
You would have to fully expand and repeat the top-level media queries for the inner rules for it to work across browsers (and I imagine the SCSS processor would generate something similar):
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {
/* Code for both portrait and landscape */
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait) {
/* Code for just portrait */
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: landscape) {
/* Code for just landscape */
}
If you wanted to do this the best way is to use the high level media query in a link tag, and then the other queries inside the linked sheet.
In practice though most people cascade their CSS rules from a base sheet that covers the common stuff and then putting changes to that in each media rule-set.
I think not possible but you can write this format If you are using SASS css pre-processor.
example , you can copy this code and paste to https://www.sassmeister.com/ -and watch the output
SASS
#media only screen and (max-width: 767px) {
body{
color:red;
}
#media (orientation:portrait) {
body{
color:green;
}
}
#media (orientation:landscape) {
body{
color:orange;
}
}
}
Output CSS
#media only screen and (max-width: 767px) {
body {
color: red;
}
}
#media only screen and (max-width: 767px) and (orientation: portrait) {
body {
color: green;
}
}
#media only screen and (max-width: 767px) and (orientation: landscape) {
body {
color: orange;
}
}