I use some CSS media queries on my Ektron site. They function correctly on the iPhone, but when I try simulating smaller screens on my production site, the breakpoints don't kick in.
Here's the strange part (to me, at least). When I view the site on my development server, the breakpoints work like a champ. The big difference is that on my dev server I've disabled CSS aggregation and minification. So it would appear that something about the css.register method in the framework API is (partially) breaking my responsive CSS. As I said, it seems to work correctly on mobile devices, but I would really like to know why it's not working on the desktop.
I've seen posts referring to minification routines used by certain platforms which break media queries (for example, they remove the word "and"). But that doesn't appear to be happening.
Has anyone else experienced this?
Here's a CSS snippet:
#media only screen and (min-width:320px) and (max-width:767px) {
/* phones, handhelds smaller than iPad */
#subnavbg {
visibility:hidden;
}
.login-left
{
border: none;
width: 100%;
}
.login-right
{
width:100%
}
}
CSS aggregation combines multiple CSS files together. If there is a syntax error in one file, it can affect all the other files that are aggregated with it. Browsers can ignore some syntax errors like a missing close } at the end of a file. However when that file is combined with other files it becomes a problem.
Try opening each css file in Visual Studio and check for errors.
Related
I'm having multiple projects now who's media queries are acting weird. for example:
#media only screen and (max-width: 891px) {
.lang-selector {
top: -150px;
}
}
This only loads starting from 801px and less, although I do not have this media query set in my SCSS (it should be starting from 891px).
Console output:
I'm working on Windows 10 and I get the same result in Firefox, Google Chrome, Microsoft Edge.
I don't think it's to do with your media query. I took your media query in code pen and performs just fine. Perhaps look at other elements and queries that may be impacting this class.
Example where the text turns red
Ok, apparently, today my problem seems to be fixed.
The most logical reason should be that my browser was not at 100%, although I'm not sure because yesterday I checked that. Maybe a reboot fixed the problem...
How can I get support for multiple screens such as tablets and phones to work in NativeScript with Angular (I am on NS 5.1 now)? I am currently trying to use the nativescript-platform-css plugin, which creates classes phone and tablet classes on the Page element and then supply different CSS along the lines of:
.phone :host .photo {
width:300;
}
.tablet :host .photo {
height:600;
}
The trouble is that it works fine in some cases but in other cases don’t (at least not in angular). For example, in modals it doesn’t work really and also I found other cases that are problematic.
I could of course apply the CSS programatically going by the nsPlatform.deviceType global variable that the plugin creates, but that seems not so 'clean' and will require quite some code on every component that I would prefer to avoid.
The multiple screen section in the docs mention that it doesn't work for Angular and Webpack builds (although AFAIK the project is moving to webpack by default now).
Thanks for any contributing thought!
If I base my CSS on mobile styling, then use #media queries for gradually larger displays (tablets, desktops etc), will the mobile devices use the desktop styles?
I believe that typically, mobile devices will load all images even if they don't apply to its own particular media size. Meaning it will load all images and hide ones not matching its query-based stylesheet.
What I am trying to do is use one background for the larger version of the site:
.splash {
background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}
and another for the mobile version:
.splash {
background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}
If I apply the mobile CSS before any media queries, and add the large media CSS below using a query like #media screen and (min-device-width: 481px) {...}, will mobile devices load the large image too?
Behaviour is browser depended but iOS Safari and Android Chrome will respect the media queries and only download the background images for the applicable media queries.
If you want to inspect this behaviour, try loading the page with Mobitest (http://mobitest.akamai.com/) or a tethered device.
If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later.
One thing to watch out for is display:none on content images as it won't prevent download in many situations. Tim Kadlec explores this more here: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
Tim Kadlec has put together some awesome research for this – Media Query & Asset Downloading Results
Your specific question is answered in Test #4 – results are spotty. Better to have media queries for both your images.
This sounds like it would be largely browser dependant, but I'd imagine any mobile browser worth its salt would try to cut down on data usage by not loading images (and possibly not loading entire stylesheets) that are marked as not for it. Furthermore many mobile browsers prefer to not be recognized as mobile browsers. I know I hate it when I pop open a site on my iPad and a mobile-stylesheet forces me to view a skinny sliver of single column site on my 9.7" screen.
So media queries are unreliable, but still worthwhile (they really don't hurt anything, so long as they're used responsibly), and that doesn't help what is a fairly obtuse (but still good) question; time to do some testing!
Most modern desktop browsers come packaged with developer tools. My current favorite is FireFox's dark and pretty web inspector (the 3D view is especially to die for). But what about on Mobile? The largest parts of your mobile audience will not be on browsers that come with developement tools.
Well, you have a couple options:
Firebug Lite has some mixed results on mobile browsers, but is
an excelent choice in most cases where other inspectors are
unavailable. It does seem to work in iOS and other mobile
browsers with HTML5 support, though.
This question suggests using something called "weinre". I've never used it, but it looks legit enough.
If you're okay with targetting just a few certain browsers, many DO include developer tools. Such as Google Chrome for Android!
Whatever you choose, you'll be looking for an asset viewer of some sort; perhaps a timeline view. Any sort of tool that will allow you to see what the page loaded, in what order it loaded it, and how long it took to load.
Good luck!
I'm coding up HTML for an email that would be viewed both in Outlook and in mobile devices. I'd like to use tables for Outlook (I need a multi-column set up), and single column divs for mobile devices (or anything < 400px).
I'm trying to do this with #media queries, and I know Outlook's CSS support is extremely shoddy, but I'm wondering if anybody knows a hack that can make Outlook "ignore" the #media query for < 400px, and apply styles for the >400px part. I tried this:
#media (max-width: 480px)
{
.mobile-email { background-color:green; }
}
#media (min-width:500px)
{
.mobile-email { background-color:red;}
}
The trouble seems to be that Outlook ignores both. Is there any way I can make this sort of a thing work in Outlook?
Thanks in advance!
In all honesty I'd steer well clear. HTML emails are a horrile horrible business. Adding media queries into the mix is asking for trouble.
Blackberrys don't support media queries for a start...
http://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails
Outlook barely even does standard CSS since it switched it's rendering engine to MS Word's.
Check out this site about email standards support for more information. I still use inline styles and tables in HTML emails as it's still the most consistent way of getting results (which in 2013 is pretty terrible)
The best practices would be to do inline css for background color. Your writing a class that does not work a cross the border. Some devices like script this way some like script this way. For example when you a responsive email that calls for a hidden: border; most devices and browser will do as the media queries call. However Android gingerbread does not do a hidden border. An iphone will do hidden the border. Outlook 2013 will do hidden the border but yahoo won't do it. For what your doing background colors for Outlook 2007 and 2010 need to have that inline You would want it to read Text here
Am hoping that will help you.
I created a web page using the bootstrap grid.
This page is rendered perfectly, as expected, when I just open it with a browser.
The container in bootstrap is smaller than the screen, everything is perfect.
BUT, if I render the exact same page as an application.html.erb layout in rails, it always send this message to the browser: #media (min-width: 1200px). This makes my page become a bit bigger than my screen. The rest is fine. Bootstrap works but the container width is too big! In the plain page it is 960px, which is perfect!
Why?
I don't want this to happen! It is really weird. I read some posts where people say it happened to them, but I have the two pages side by side and "inspect element" shows #media (min-width: 1200px) in the css of the "row" class in the rails page and nothing in the other!
I am totally not willing to hack the bootstrap css. I would just like to figure out what is happening and fix it ! I would really like to use it as a stylesheet and not as a gem...
thanks so much in advance!
P.S.:
In rails, I copied the bootstrap folder in my /assets/stylesheets/ directory
How about adding your own style in the file 'bootstrap_and_overrides.css.less' (or any other you have)?
In my own CSS, I have this:
.container {
width: 960px;
}
and the problem is solved. :)
Maybe the answers to my questions regarding Bootstrap & Rails provide you with some insight:
How to access Bootstrap Files individually
How to pass Bootstrap-Variables in Rails