I've seen similar questions, but not this exactly.
Do CSS media queries have to be in an external CSS file to work properly?
I've got a client who I’ve only got access to an inline css block within WordPress. Their IT department has the CMS really locked down, and the only thing I have access to change is the CSS via a plugin called Improved Simpler CSS that puts an inline block of <style type="text/css"></style> before the <head> closes.
In doing the site, the browser seems to pick up the "inline" media queries OK, responding to changing the browser's width, but utilizing an iPhone or iOS simulator, I only get the desktop view, and I'm thinking iOS doesn't like the CSS not being externalized.
<style type="text/css">
/* Mobile-specific media query */
#media only screen and (min-width: 320px) and (max-width:767px) {
#wrapper,
.home #content,
.page #container,
.page .page,
#footer,
.page #content {
width: 100%;
}
#header {
margin-top: 50px;
margin-left: 20px;
width: 95%;
width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
height: 151px;
}
}
</style>
No, they don't have to be external...
MDN's docs on Media Queries demonstrates the two main ways of setting media queries:
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a stylesheet -->
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
Media queries are perfectly valid within <style>, they don't have to be within an external stylesheet.
Make sure you include the viewport meta tag in your head (if you haven't already):
<meta name="viewport" content="width=device-width, initial-scale=1">
It would also help if you include the CSS you currently have.
Related
Scenario :
I'm using material icons, and I face a problem, I usually use filled ones and everything is ok, right now I want to use a outlined one, they have the same name, "screen_share"
Tried Case :
My try was include in index.html:
<link
type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"/>
<link type="text/css"
href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined"
rel="stylesheet">
and in myComponent.html
<button mat-button>
<mat-icon>
screen_share_outline
</mat-icon>
</button>
but it still shows the filled one.
How can I do it?
this is not the same than the suggested duplicate, because the solution presented is the option I try and didn't work
Use
<link type="text/css"
href="https://fonts.googleapis.com/icon?
family=Material+Icons+Outlined"
rel="stylesheet">
Instead of
<link type="text/css"
href="https://fonts.googleapis.com/icon?
family=Material+Icons&style=outlined"
rel="stylesheet">
Looks like the outlined fonts have not been finalized yet per issue #773
https://github.com/google/material-design-icons/issues/773
I see you are reviewing this issue
How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?
Until the outlined versions are completely included you will need to use the workaround provided in that stackoverflow question... I verified it in stackblitz and it does work.
Add following import to index.html
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
Add the following to style.css
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
Use the following in your component html.
<i class="material-icons-new outline-screen_share"></i>
You can use, for while, this repository. Works pretty equal to Material Icon normal
cguilhermf/material-icons-outline
Current configuration of hardware: iPhone 6s, iOS 10.0.1 (I have a software update pending for iOS 10.0.2)
I have the following html test code (p.s. I've also tested with iPhone 6s specific queries like specified in this answer)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#media (max-width: 600px) { h1.query1 { color: red !important; } }
#media (max-width: 700px) { h1.query2 { color: purple !important; } }
#media (min-width: 300px) { h1.query3 { color: blue !important; } }
#media (min-width: 320px) { h1.query4 { color: white !important; } }
#media (max-device-width: 1125px) { h1.query5 { color: yellow !important; } }
#media (max-device-width: 1242px) { h1.query6 { color: violet !important; } }
</style>
</head>
<body style="margin: 0 0 0 0; padding:0; min-width: 100%; width: 100%; offset: 0; clear: both;">
<div style=" margin: 0; min-width: 100%; padding: 0; width: 100%;">
<h1 class="query1" style="color: green;">MEDIA TEST</h1>
<h1 class="query2" style="color: green;">MEDIA TEST</h1>
<h1 class="query3" style="color: green;">MEDIA TEST</h1>
<h1 class="query4" style="color: green;">MEDIA TEST</h1>
<h1 class="query5" style="color: green;">MEDIA TEST</h1>
<h1 class="query6" style="color: green;">MEDIA TEST</h1>
</div>
</body>
</html>
Live version is here: http://codepen.io/anon/pen/gwkbEK
When I send it to my account in Gmaill app on Android phone I get the following result (all lines are colored):
But when I open same mail in native iOS 10 mail application in iPhone 6, I get this result (all labels are green):
Am I doing something wrong, or iOS 10 mail client stopped supporting media queries?
Important to note: these screenshots are of Gmail app on iOS, not iOS Mail app. Until a few weeks ago, no mobile Gmail client anywhere supported media queries. Gmail recently started rolling out media query support based on platform, geo-location, and product. Results will vary across Google Mail products until the rollout is complete.
As of October 2016, U.S.-based Gmail accounts are starting to see media query support whereas U.K.-based accounts are not. Litmus Previews use UK Gmail accounts, so we won't see the update appear in Litmus regardless of where we're testing from.
Gmail is also rolling out based on Gmail product, so depending on what TYPE of Gmail product you're checking and the platform, results could vary. Here is a quick breakdown of where the rollout stands now:
More info and updated charts on Litmus
<!DOCTYPE html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html>
<head>
<title>Test title</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#status {
/* avoid an excessively wide status text */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
max-width: 400px;
}
</style>
</head>
<body>
<p>Example 1<br>
<a href="http://dummyimage.com/600x400/000/fff.png" download>Download this image</a></p>
</body>
</html>
The above, is a button (kind of) that downloads an image. It works fine on my laptop, but when I navigate to the url on my iPhone it doesn't download. Just takes me to the actual image.
Anyone know why? Or how I can fix this?
Thanks!
iPhone doesn't have a download functionality. You will need to tap-and-hold, and select "Save".
I am using Grails 2.1.0 and Twitter Bootstrap Plugin 2.1.1 and am encountering an issue with navbar-fixed-top.
In order to get the Navbar fixed to the top of the page to behave correctly during resize, the Twitter Bootstrap Docs states:
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
How can I do this when using the Grails Plugin for Twitter Bootstrap?
Here is what I have tried:
main.gsp
<head>
...
<r:require modules="bootstrap-css"/>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<r:require modules="bootstrap-responsive-css"/>
<r:layoutResources/>
</head>
The problem is that Grails Plugin for Twitter Bootstrap takes the content of bootstrap.css and bootstrap-responsive.css and combines them into the following merged file: static/bundle-bundle_bootstrap_head.css.
Thus, I am not able to put the body padding style "after core Bootstrap CSS and before Responsive CSS" as per Twitter Bootstrap docs.
Here is the View Source HTML that I get from the main.gsp above
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="/homes/static/bundle-bundle_bootstrap_head.css" type="text/css"
rel="stylesheet" media="screen, projection" />
If there is no way to do this, I could always just drop the Grails Twitter Bootstrap Plugin and manually download Twitter Bootstrap and put it my Grails Project's web-app/css, web-app/images, and web-app/js. However, I would like to be able to use the Grails Twitter Bootstrap Plugin.
Thank you very much in advance, I appreciate it!
Bootstrap recommends that place for the style because when the screen width goes below 980px navbar becomes static (not fixed). So calling bootstrap-responsive.css after the padding prevents from a blank space at the top in mobile devices (there's not fxed element to fill that padding).
You can reproduce this behaviour using a media query:
#media (min-width:980px) {
body {
padding-top: 40px;
}
}
Put this CSS anywhere in your stylesheets, and don't worry about your <links>
I have a Grails application with a form in it. Once the user has entered the data and submitted it, and it's been validated etc.. I need a message to popup in a little window to give the user some feedback - it needs to popup, rather than be displayed on the page. Can anyone advise me on the best way to do this?
I have implemented the same mechanism for my application, and I am using the jQuery plugin 'smartmodal' (used by the Nimble plugin originally). See here
You simply have to redirect the request in the controller validation code to a GSP page containing the following code:
<script type="text/javascript" src="${resource(file: 'jquery-1.3.2.js')}"></script>
<script type="text/javascript" src="${resource(file:'jquery.smartmodal.js')}"></script>
<LINK rel="stylesheet" href="./css/smartmodal.css">
...
<body>
...
<g:javascript>
$(function() {
$("#msg").hide();
$("#msg").modal({hide_on_overlay_click:false});
$("#msg").modal_show();});
</g:javascript>
<div id="msg">
My feedback message is here
</div>
<g:link controller="..." action="...">Close</g:link>
I hope it helps,
Fabien
EDIT:
An extract of the smartmodal.css file that will render the 'modal effect' is:
#modal_content {
display: none;
position: fixed;
left: 50%;
padding: 0px;
top: 10%;
background: #FFF;
border: 0px solid #d2d2d2;
width: 400px;
margin-left: -200px;
text-align: left;
}
#modal_overlay {
background-color: #000;
}
However if you want the complete file, it is available inside the great Nimble grails plugin