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!
Related
I have the following css thats breaking my layouts:
#media (min-width: 768px)
.row {
display: flex;
}
Can I disable the display flex rule? Can anyone explain why this happens?
Update:
Currently using boostrap-sass, "bootstrap-sass": "~3.3.5"
Cant find the line in my sass files, probably not much help but it appears here in my compiled css:
strong {
font-weight: 600; }
.wrapper {
padding: 50px 20px; }
// row class here
**#media (min-width: 768px) {
.row {
display: flex; } }**
#media (min-width: 768px) {
.column {
width: 50%; }
.column:first-child {
margin-right: 20px; } }
.modal__button {
margin-right: 5px; }
#media (max-width: 500px) {
.modal-dialog {
width: 100%;
margin: 10px auto; } }
.week-navigation {
float: right; }
.week-navigation__next-button {
float: right; }
CSS display property has several possible values. One of them, and the most recent, is flex. A HTML element with flex will automatically apply default properties to its children elements. You can check the following url to understand how flex works https://css-tricks.com/snippets/css/a-guide-to-flexbox/
So, if you don't want to use it, just override it, by using
#media (min-width: 768px)
.row {
display: block;
}
for example.
Can you tell me a little more about where this following block of CSS is located? What version of bootstrap are you running as well? It may be something as simple as changing a boolean from true to false and then recompiling the SCSS that bootstrap 4 (assuming that is the version you are using) provides.
If you are using an older version of bootstrap, then you have a library, or CSS you wrote yourself that is overwriting. I am leaning that your issue is being caused by the prior assumption.
If you have SASS installed on your computer already and are familiar with it as well, then this is easy. Locate the _variables.scss file that is included with bootstrap and inside of it you will find the following property:
$enable-flex: true !default;
You want to change this to:
$enable-flex: false !default;
After you have done this, recompile bootstraps the SCSS and you will then have disabled flex throughout the entire bootstrap framework.
Bootstrap 4:
div.row {
display: block;
width: 100%;
...
}
div.row div.col {
width: 100%;
max-width: 100%;
...
}
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'm trying to get a div to disappear using
#media all and (max-width:1000px) {
#triangle{ display: none; }
}
but it's not working for me for some reason. This is the CSS of the div:
#triangle {
width: 0;
height: 0;
position:absolute;
top:110px;
right:250px;
border-bottom: 100px solid #d8e2ff;
border-left: 100px solid transparent;
border-top-right-radius: 0%;
display:inline-block;
}
Here is the website : http://www.ciaransmith.ie/aboutme.php. The div is the triangle of the speech bubble
Any ideas?
Also, my contact page is displaying wonky sometimes, and other times it displays fine, why is this happening?
Try this
#media all and (max-width:1000px) {
#triangle{
display: none !important;
}
}
Please place the code in the file itself not in CSS file
I could only find this:
#media all and (max-width:1000px) {
#whiteback { display: none; }
}
Which targets the wrong ID. Perhaps I missed the correct css but either way style isnt being aplied so the current issue is either the ID, or the media syntax
display: inline-block; isn't wrapped in a media query. Add this:
#media all and (min-width: 1001px) {
#triangle {
display: inline-block;
}
}
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;
}
}