I am having a strange problem on IOS7 browsers (safari and chrome).
When I am in landscape, the media queries do not work and the width/height (given from $(window).width() and $(window).height() respectively) are: 768/519 instead of 1024/672 px that usually was showing in ios6 safari and chrome.
In portrait, it is 768/927 which is correct.
Has anyone else found that bug/quirk and/or workaround?
* Update *
This is my header code (along with wordpress code):
<meta content='True' name='HandheldFriendly' />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' />
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
Would you happen to be including this meta tag in your HTML?
<meta name="viewport" content="width=device-width">
Try changing it to this instead:
<meta name="viewport" content="width=device-width, initial-scale=1">
Use aspect-ratio and device-aspect-ratio instead. Bulletproof iOS media queries...
/* iPad: portrait */
#media screen and (aspect-ratio: 768/716) and (device-aspect-ratio: 768/1024), screen and (aspect-ratio: 768/1024) and (device-aspect-ratio: 768/1024) {
/* styles here */
}
/* iPad: landscape */
#media screen and (aspect-ratio: 1024/372) and (device-aspect-ratio: 768/1024), screen and (aspect-ratio: 1024/768) and (device-aspect-ratio: 768/1024) {
/* styles here */
}
/* iPhone 3.5" screen: portrait */
#media screen and (aspect-ratio: 320/220) and (device-aspect-ratio: 320/480), screen and (aspect-ratio: 320/480) and (device-aspect-ratio: 320/480) {
/* styles here */
}
/* iPhone 3.5" screen: landscape */
#media screen and (aspect-ratio: 480/114) and (device-aspect-ratio: 320/480), screen and (aspect-ratio: 480/320) and (device-aspect-ratio: 320/480) {
/* styles here */
}
/* iPhone 4" screen: portrait */
#media screen and (aspect-ratio: 320/308) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 320/568) and (device-aspect-ratio: 320/568) {
/* styles here */
}
/* iPhone 4" screen: landscape */
#media screen and (aspect-ratio: 568/114) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 568/320) and (device-aspect-ratio: 320/568) {
/* styles here */
}
Related
I'd like to completely remove my map from this
http://beyondmyborder.com/destinations/
when the screen size decreases.
Div Id :
id="mapdiv"
Thank you!
So to do a specific action with CSS you need media queries. I suggest you google media queries to get an idea what they do and how they work. I also got an example below. Media queries are basically a statement that execute when the screen width matches the queries. For example if the screen is smaller than 1200px or 979px.
Media breakpoints not working on wordpress
#media only screen and (max-width : 1200px) {
}
#media only screen and (max-width : 979px) {
}
#media only screen and (max-width : 767px) {
}
#media only screen and (max-width : 480px) {
}
#media only screen and (max-width : 320px) {
}
In your case you want a custom media query at 560px:
#media only screen and (max-width : 560px) {
#mapdiv {
display: none;
}
}
What this does; when the screen size is below 560px width. it will execute/overwrite the css. What we say is div with the id: mapdiv add the css rule: display none (hide the element).
To get the mediaqueries/viewport working you also need to add this line in your header:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ok the question has been asked many time before and I went through each and everyone of them but it didn't worked for me
In mobile view I want to set slideshow col position from Relative to Static which will result into this
But instead I'm seeing this on mobile (adjacent col is overlapping)
which means Col is still in relative position and media Queries are not working on mobile platforms however It does work in Desktop Chrome browser.
I used meta tags and different combinations of min and max values (after confirming screen resolution)
for example
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
section.banner .slideshow-col{
position: static;
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 320px) {
section.banner .slideshow-col{
position: static;
}
#media (min-width : 700px) {
section.banner .slideshow-col{
position: static;
}
#media (min-width: 992px) {
section.banner .slideshow-col{
position: relative;
}}
#media (min-width: 1200px) {
section.banner .slideshow-col{
position: relative;
}}
My website is here http://
Any hint?
Try to use this solutions
#media screen and (max-width: 760px){
.slideshow-col {
position: relative;
height: 300px; <-- height of the slideshow
// You can use min & max height of slideshow for mobile devices
height: auto;
min-height: xxx;
max-height: xxx;
}
}
I am trying to use media query to display text box with different styles for iPhone5,iPhone6,Samsung galaxy SIII and Samsung galaxy S4. For iPhone 5 and IPhone 6 I am getting desirable result. Now when I switch from iPhone to Samsung s3 I am getting correct output but when I try to switch to S4 from S3 I am getting wrong output. Here's the style that I am using for media query. Attaching the screenshots also. I am not getting the actual problem here.
<style>
#media only screen and (device-width:375px){
.homeDOB{
width:60% !important;
height:80px !important;
background-color: yellow;
} }
#media only screen and (device-width:320px) {
.homeDOB{
width:60% !important;
height:80px !important;
background-color: black;
} }
#media only screen and (device-width:360px) and (device-height:640px) and (-webkit-min-device-pixel-ratio:2){
.homeDOB{
width:60% !important;
height:80px !important;
background-color: gray;
}
}
#media only screen and (device-width:360px) and (device-height:640px) and (-webkit-min-device-pixel-ratio:3){
.homeDOB{
width:60% !important;
height:80px !important;
background-color: red;
}
}
</style>
For Galaxy S4, device width it hits at is a little over 400px. Try changing your media query to:
#media screen and (max-width: 480px) {
.homeDOB {
width:60% !important;
height:80px !important;
background-color: black;
}
}
and see if it work on your mobile phone. Also, this is the viewport must use:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
device width for samsung galexy s3 and s4 is 640px.
Try this
#media only screen and (max-width:640px){
//your CSS rules
}
Here you can find list of device width/height http://www.canbike.org/CSSpixels/
I have added a vertical banner position (div class = "werbe-wrapper") at the RIGHT HAND SIDE of my webpage golfanatics.de. This position is, however, not shown when looking at the website with a tablet (eg. iPad) or a mobile phone.
The website is based in Joomla, the template allows for a responsive layout which I have DISABLED.
Any idea, where I could look at, in order to have the above position being displayed?
Thanks and cheers,
Ralph
In your custom.css is:
/* Handhelds */
#media (max-device-width: 480px) {
.nomobilebanner {
display: none !important;
}
...
}
and
/* iPad Portrait */
#media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
.nomobilebanner {
display: none !important;
}
.noipadbanner {
display: none !important;
}
}
This is where your issue is coming from.
What code can I use to make a particular div show only if on a mobile width?
I have a 100% width full div at the top of my screen, would like it to only show when the device is specified as a mobile width.
I'm not sure, what you mean as the 'mobile width'. But in each case, the CSS #media can be used for hiding elements in the screen width basis. See some example:
<div id="my-content"></div>
...and:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-content { display: block; } /* show it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-content { display: none; } /* hide it elsewhere */
}
Some truly mobile detection is kind of hard programming and rather difficult. Eventually see the: http://detectmobilebrowsers.com/ or other similar sources.
It sounds like you may be wanting to access the viewport of the device. You can do this by inserting this meta tag in your header.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://www.w3schools.com/css/css_rwd_viewport.asp
Small devices (landscape phones, 576px and up)
#media (min-width: 576px) {
#my-content{
width:100%;
}
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
#my-content{
width:100%;
}
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
display: none;
}
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) {
// Havent code only get for more informations
}