this is not sublime problem, my code
#media(min-width:801px){
margin: 0 auto;
margin-top: 40px;
margin-left: 370px;
}
shows in sublime the margin is in white color.. then I test in my browser, and as expected, the css doesn't apply.. the syntax above should be fine.. what is this happen?
You need to define a selector within the media query, e.g.
#media (min-width: 801px) {
body {
margin: 0 auto;
margin-top: 40px;
}
}
http://jsfiddle.net/g7MVx/2/
You aren't applying those margins to any elements. A media query wraps around regular CSS selectors like so:
#media (min-width:801px) {
.myClass {
margin: 0 auto;
margin-top: 40px;
margin-left: 370px;
}
}
Refer to MDN's CSS media queries page for more information.
#media only screen and (max-widht: 510px) {
.nav__ul {
display: none;
}
}
Same problem, trying to apply this code, the ""max-widht doesn't appear as a posible property and stays in white. It doesnt. I have to copy the code from the web to make it work.
you can define in scss this way,
for example,
body{
#media(min-width:801px){
margin: 0 auto;
margin-top: 40px;
margin-left: 370px;
}
}
Related
I have this stylesheet in a polymer component:
<style include="app-grid-style">
:host {
--app-grid-columns: 1;
--app-grid-gutter: 10px;
display: block;
margin: 0 auto;
}
#media only screen and (min-width: 768px) {
:host {
--app-grid-columns: 2;
--app-grid-gutter: 15px;
}
}
#media only screen and (min-width: 1170px) {
:host {
width: 90%;
--app-grid-columns: 4;
--app-grid-gutter: 30px;
}
}
paper-button {
margin: 0;
min-width: 0;
text-transform: none;
color: var(--app-dark-primary-color, black);
}
.header {
#apply(--paper-font-headline);
color: var(--app-dark-gray-color);
}
.header-icon {
float: right;
font-size: 15px;
vertical-align: middle;
}
p {
color: var(--app-light-gray-color);
}
</style>
Ok, it seems the media queries are fine, because if I resize the browser and refresh, I see the page with the changes or if I access to the page from my iPhone, I see the site for smarphones.
However, I think I must see how the css change the page when I resize the browser without I have to reload the page.
Are there any bug in my stylesheet?
Ok, i have found the solution in polymer documentation. I think it's a bit hidden:
"For browsers that don't support custom properties, call Polymer.updateStyles() to re-evaluate the media queries upon window resize" - For more information: https://www.polymer-project.org/1.0/docs/release-notes#v-1-6-0
Analyzing the example in documentation, I have found they call that method in attached function on polymer element.
I have tried this fix and it's works!
Alright so for some reason I've been trying to figure this out but can't. What's wrong with this? It's not being called at all. I'm trying to basically setup a simple responsive theme.
It is kind of strange inside the notepad++, when I type like #medi it will be blue but once I add #media it will go black.
#media only screen and {min-width: 150px} and {max-width:600px} {
body {
width: 100%;
font-size: 100%;
background-color: black;
}
#header {
width: 50%;
height: 50%;
margin-top: 10px;
}
}
Change your curly brackets to round brackets and it will start working..!
#media only screen and (min-width: 150px) and (max-width:600px)
I have a few different stylesheets and one has #media queries that for some reason are being loaded regardless of screen size in IE. The #media queries were in my main Site.css file so I moved them to a 'new' stylesheet for all browsers. If put them in an IE specific stylesheet and remove them from all other stylesheets then everything works as planned since i'm targeting IE10 with the JS that adds the ie10 class if the correct browser loads so i'm good. Problem is that i need those #media queries for things to work on all other browsers and since IE10 and above have stopped using conditional statements i cant exclude the 'new' stylesheet by using the <!--[if !IE] comment.
If i use:
<!--[if !IE]>
<link href="#Url.Content(string.Format("{0}/css/search-media-queries.css", Model.RequestAuthorityUrl))" rel="stylesheet" type="text/css" />
<![endif]-->
It seems to work on all IE but it doesn't load the stylesheet in the other browsers. The syntax for the location of the stylesheet is a little odd but theres a purpose to that and it has nothing to do with the issue so i dont want to clutter this question wit
Any advice on how i should go about adding these styles to all browsers EXCEPT ie and then i can have them in the IE specific stylesheet so they wont load right away and break my layout. I understand this probably sounds confusing and was a difficult bug to finally figure out because i also couldn't see my code in the IE inpsector to debug so i had to just take out CSS until i finally noticed what it was.
ORIGINAL ISSUE:
What was happening is that i have a div with some inputs and have made that div responsive and tweaked with #media queries. If i load the page the div and it's contents are displayed as if already using one of the #media queries although the browser size is outside of the scope of the #media queries. If I resize the browser (make it smaller) and then i set it back to fit the full size of my screen then the correct layout is applied.
UPDATE CSS CODE EXAMPLE:
#media screen and (max-width: 1222px)
{
div#spiSearchWidget
{
width: auto;
}
div#spiSearchWidget #spiStartDate
{
margin-right: 20px;
margin-bottom: 0px;
}
div#spiSearchWidget .endDate
{
}
div#spiSearchWidget .adultLbl
{
margin-right: 58px;
margin-left: 20px;
}
div#spiSearchWidget .childLbl
{
margin-bottom: 0px;
}
div#spiSearchWidget select#Children
{
margin-left: 10px;
}
div#spiSearchWidget #spiSrchBtn
{
clear: none;
margin: 20px 70px 0px 70px;
}
}
#media screen and (max-width: 1104px)
{
#spi-walkin-searchbox .availContLrg
{
width: 20%;
}
div#spiSearchWidget
{
width: auto;
}
div#spiSearchWidget #spiStartDate
{
margin-left: 20px;
margin-bottom: 10px;
}
div#spiSearchWidget .endDate
{
clear: both;
margin-left: 10px;
}
div#spiSearchWidget .adultLbl
{
margin-left: 42px;
clear: both;
}
div#spiSearchWidget .childLbl
{
clear: both;
margin-bottom: 0px;
margin-left: 34px;
}
div#spiSearchWidget select#Children
{
margin-left: 10px;
clear: both;
}
div#spiSearchWidget #spiSrchBtn
{
clear: both;
margin: 20px 20px 0px 20px;
}
}
All of that is loaded from the beginning for some reason.
Your problem isnt about excluding stylesheets, it should be about getting it to work properly in all modern browsers. They removed conditional comments for a reason.
IE10 is not bad at rendering. Ive personally never had an issue with responsive code and IE9+. Maybe post a snippet so we can see how you're doing it?
I found this helpful, from http://www.impressivewebs.com/ie10-css-hacks/
if (/*#cc_on!#*/false && document.documentMode === 10) {
document.documentElement.className+=' ie10';
}
I've used a css validator which at first was bringing up some errors to do with the media query, I have since fixed these errors (and checked again with a validator - this time bringing back 0 errors) but it is still not recognising the code in my browser. I'm using chrome.
/* MEDIA QUERIES ======================================================= MEDIA QUERIES */
#media screen and (max-width: 640px) {
/* HEADER SLIDER */
#home-header .home-slider {
max-width: 100%;
margin: auto;
}
#home-header .metaslider {
max-width: 90%;
margin: auto;
}
/* USE IT ============================ USE IT */
.circle {
display: block;
margin: 0 auto 30px;
}
#circle-3 {
margin-right: auto;
}
#use .logo {
display: none;
}
#use .buy-now {
float: none;
margin: 0 auto;
}
}
You should also make sure if your main css file has got lower priority than your media queries. Maybe #home-header styles from media queries are just being ignored?
If yes, just prepend selectors with e.g. body div so they will look like body div#home-header .home-slider. Making your selectors more precise will give them higher priority.
I've been having some issues with my CSS3 media queries...
Here's a small snippet of one I'm currently working on:
#media only screen
and (max-width : 420px) {
.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }
/* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}
/* Increase the main title for slightly larger screens! */
#media only screen
and (max-width : 480px) {
.page .alpha { font-size: 3em; }
}
I'm working from a 'mobile first' standpoint and given the normal behaviour of CSS regarding the 'cascading' aspect I would expect the second #media statement to inherit all of the styles from the previous statement, whilst overriding any for which it has a matching or 'heavier' selector.
(Plus CSS's order of precedence would mean any matching style definitions would use the last defined rule-set unless 'trumped' with an !important statement!)
From what I've seen though, through testing and some Google / SE searches this is not the case.
Is it possible for #media style rules to inherit from applicable earlier statements or am I stuck with having to repeat all the rules I need for each statement? (not very DRY)
I'd really appreciate any help and clarifications / explanations for this.
Firstly thanks #BoltClock (for both comments), and to the other comments and answers for all your help.
I think I made a mistake in my media queries and/or was miss-understanding how they worked and interacted together. I was going to edit my question with the following but decided it would make more sense as an answer (since it's the solution I used). I apologise if this has wasted anyone else's time.
Here's my fixed snippet of code:
#media only screen
and (max-width : 480px) {
.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }
/* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
}
/* Increase the main title for slightly larger screens! */
#media only screen
and (min-width : 421px)
and (max-width : 480px) {
.page .alpha { font-size: 3em; }
}
I realised from your comments that if I increased the max-width in my first block to cover the necessary range/limit I could then either nest or add the second block after it (I tried both and they both worked for me -- using chromium browser [18.0.1025.151]). This successfully gave me the desired result, in that the page .alpha element's font size increased at the required stepping/interval.
Thanks again for all SO'ers who helped!
(and to SE for the awesome communities they've helped build)
Knowledge > OpenSource > Freedom
If you want to work from mobile up, you will need to set the mobile layout as the default layout. (Remove the query). From there the queries will inherit from above.
.page { min-width: 300px; max-width: 480px; width: 100%; }
.page .alpha { font-size: 2em; }
/* Set-up the column */
.page .column { margin: 0 auto 2%; width: auto; }
.page .gallery .column { min-height: 470px; height: auto; padding: 2%; }
/* Increase the main title for slightly larger screens! */
#media only screen
and (max-width : 480px) {
.page .alpha { font-size: 3em; }
}