I'm working on an asp.net site and making it responsive, just using #media commands in the stylesheet.
Usually when I work on apache websites, e.g. wordpress as soon as I refresh the page, I can resize the brower to a mobile or tablet size and see the changes on a PC browser. But with this .net site the changes don't show.
They do show however on my actual mobile phone, but I don't want to have to keep previewing changes through my phone.
I've tried using an emulator like mobiletest.me but that doesn't display the changes either. I've tried using Firefox and Chrome, neither work. It seems the website isn't being fooled into thinking my browser is a mobile.
Anyone have an an idea on what this issue could be?
Thanks
UPDATE
Sorry code below:
#media only screen and (max-device-width: 480px) {
#block1 {
display:none;
}
An educated guess says that you are using a specific media query for devices, rather than resolution alone, which is why it's not responding when you resize the window.
Mobile devices: (what i suspect you have)
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Based on Resolution: (what you require)
#media only screen
and (min-width : 320px) {
/* Styles */
}
Related
Client has the following display settings on Windows Surface. He is seeing a website quite differently that to what I am seeing. What CSS media query can I use to be able to make adjustments to allow for these specific settings
I would start with:
#media only screen and (min-width: 2736px) and (min-height: 1824px) and (orientation: landscape) {
...
}
You can also detect it via JS.
Read this: How to check if device is Windows Surface Tablet and browser is chrome or IE
And if it's a Surface, add some CSS class dynamically to the appropiate elements.
My media query works on Android in all browsers but not on IPhone. I have IPhone 6s Plus and when I opened my website, it crashed the page. On other IPhones it's just css in mess. What's the problem?
#media only screen and (max-width:768px) and (orientation : portrait) {}
Just use :
#media (max-width:768px) {
}
In my opinion, the other parameters are irrelevant, they just lead you to messy stylesheets.
But keep in mind that a better approach may be to set breakpoints based on content and layout.
I advise you to read this SO Post
I have a question on media queries.
My html is the following
<div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
my css is the following
.item {
width: 50px;
height: 50px;
background-color: yellow;
width: 100%;
margin: 8px;
}
#media screen and (max-width: 720px) {
.item {
background-color: green;
}
}
I have the following line in index.html <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
Now, if I reduce the size of the browser, I see the divs in green. If I use the Chrome device simulator for iPhone6 plus, I see the divs green. If I use other iPhone plus simulators I see the divs green.
BUT, if I install this code into an app server (a simple ASW S3 in this case), and I download the page on my iPhone6 plus, I see the divs in yellow.
Apparently the media query does not work properly. I am sure I am doing something wrong, but I am totally blind at the moment.
You have to understand the difference between max-width and max-device-width.
Here max-width is width of the target display area, e.g. the browser
and max-device-width is the width of the device's entire rendering area, i.e. the actual device screen
So based on your device iphone 6 plus your css should be like below for landscape mode
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 3)
{ }
and for portrait
#media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (device-width : 414px)
and (device-height : 736px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 3)
and (-webkit-device-pixel-ratio : 3)
{ }
Thanks all.
I have done some analysis and found the cause, even if not the solution.
The web server where the site resources are hosted is an AWS S3 instance, let's say http://my-site.s3-website.eu-central-1.amazonaws.com/.
If I access my site directly from AWS S3 with the address http://my-site.s3-website.eu-central-1.amazonaws.com/ then everything works as expected, i.e. media queries work fine on mobile devices.
The domain I want to use to access the site is mydomain.com, which I have defined with GODADDY.
Therefore I have defined a redirect rule in the GODADDY configuration so that it points the correct AWS S3 address. I use the option "Forward with masking" since I want to see mydomain.com on the browser bar.
If I access now the web site FROM A MOBILE DEVICE using the domain mydomain.com I see something different, the site looks like it is not using the css media queries. By the way, this happens only on mobile devices, on the browsers on PC or Mac everything works as expected.
Now I make a change in the GODADDY configuration. I use the option "forward without masking". Everything works as expected even on the mobile devices, even if I have to see in the browser bar the http://my-site.s3-website.eu-central-1.amazonaws.com/ address.
As I said at the beginning, this seems to be the cause of what I have experienced. No idea about a solution. I will post a more specific question, now that I know something more.
I am using this code:
#media (min-device-width: 400px) and (max-device-width: 1020px) {
.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}
}
When I view the website on the actual tablet, the code seems to work fine. However, when I view the site on a tablet emulator website, it doesn't work.
Am I doing something wrong with the syntax ?
As far as I understand the emulator is not treated as a "device", therefor the media query does not apply to it. The emulator is likely opening the website in an iFrame, so a simple min/max-width query will apply.
change this:
#media (min-device-width: 400px) and (max-device-width: 1020px) {
.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}
}
to this:
#media (min-width: 400px) and (max-width: 1020px) {
.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}
}
Here is why:
It is also possible to create queries based on *-device-width; though
this practice is strongly discouraged.
The difference is subtle but very important: min-width is based on the
size of the browser window, whereas min-device-width is based on the
size of the screen. Unfortunately some browsers, including the legacy
Android browser may not report the device width properly and instead
report the screen size in device pixels instead of the expected
viewport width.
In addition, using *-device-width can prevent content from adapting on
desktops or other devices that allow windows to be resized because the
query is based on the actual device size, not the size of the browser
window.
For my CSS media queries I've set it up mobile first which deals with all the overall styling.
I then have:
#media only screen and (min-width : 790px) {
}
#media only screen and (min-width : 990px) {
}
and I've added in
#media screen and (orientation: landscape) and (max-width: 520px) {
}
which deals with the CSS changes when the smart phone is turned round to landscape mode, but it doesn't seem to work, am I writing the landscape media query wrong?
Had a similar issue: my iPod/iPhone devices were detected as portrait orientation even when rotated.
I managed to resolve that with the following media query:
#media screen and (min-aspect-ratio: 4/3)
{*your styles here*}
If you want to target any case when width is greater than height, I think something like (min-aspect-ratio: 101/100) or something like this might work. However, for current devices 4/3 is sufficient, I think.
If you need aspect ratio for landscape, I think min-aspect-ratio: 1 suffices ... and therefore max-aspect-ratio: 1 for portrait.
But, even when the CSS is correct, there's an additional step required for a Cordova / PhoneGap app: Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?
I found this StackOverflow item before that one, so perhaps others will also find a cross-link useful.