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%;
...
}
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!
I have a calendar.css file that contains the rule #calendar.
The calendar.css file has some table classes.
Problem: I want to apply the following CSS to all tables in the app, except the ones that are called by #calendar
#media screen and (max-width: 1050px) {
table {
overflow-x: auto;
display: block;
}
}
You can use the following CSS:
table:not(#calendar) {
overflow-x: auto;
display: block;
}
More info on :not selector here
This rule is less specific than #calendar so it will always be applied to all tables, but be overwritten by #calendar rule.
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
You can use not() pseudo to do that like following:
/*table*/
#media screen and (max-width: 1050px) {
/*#media screen and (max-width: 750x) {*/
table:not(#calendar) {
overflow-x: auto;
display: block;
}
}
Please try the not-construct in CSS:
http://www.w3schools.com/cssref/sel_not.asp
So for example:
:not(table#calendar) {
background: #ff0000;
}
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.
See following fiddle:
HTML:
<div class='header'>Header</div>
<div class='main'>
<div class='row'>
<div class='cell lg-4'>
content
</div>
<div class='cell lg-4'>
content
</div>
<div class='cell lg-4'>
content
</div>
</div>
</div>
SASS:
.header {
display: none;
}
.main {
.row {
width: 100%;
.cell {
width: 100%;
background-color: red;
margin-bottom: 10px;
}
}
}
#media (min-width: 600px) {
.header {
display: block;
}
.cell {
margin-bottom: 0;
margin-left: 1px;
float: left;
&.lg-4 {
width: 33%
}
}
}
By looking at this code you would think it does the following:
Show by default a mobile design: i.e. cells are stacked vertically and take all screen space and the header is hidden
Above 600px: Become a row of 3 cells taking up 1/3 of the horizontal space each and show the header.
If you try it in the fiddle, you will see that in both viewports (above and below 600px) the cells are shown stacked vertically however the header does get hidden or shown as specified in the media query.
After searching for quite some time, I realised the query becomes effective for cells only if the media query adopts the exact same nested structure as the normal sass code, i.e.:
#media (min-width: 600px) {
.header {
display: block;
}
.main {
.row {
.cell {
margin-bottom: 0;
margin-left: 1px;
float: left;
&.lg-4 {
width: 33%
}
}
}
}
}
Why does this happen, and more importantly, how to avoid having to reuse the same structure in media queries? (the workaround for this fiddle is simple, but my actual code has more than 10 to 20 nested variables so adding a media query for the 20th element would force me to add 19 useless lines of nested variables, quickly overloading the code and making it difficult to read)
Maybe I am doing this wrong, as I am rather new to making my own responsive design, so am I missing some best practices that avoid this situation?
It's because .main .row .cell is more specific than .cell in a #media query.
It's good practice to reduce nesting as much as possible in order to prevent this exact situation happening as it's a pain to get around. Some other problems that come out of a lot of nesting is that it makes styles non-modular and difficult to reuse, as they rely on the exact structure, it can also bad for performance.
I recommend splitting up the top section like this:
Demo
.header {
display: none;
}
.main {
/* ... */
}
.row {
width: 100%;
}
.cell {
width: 100%;
background-color: red;
margin-bottom: 10px;
}
#media (min-width: 600px) {
.header {
display: block;
}
.cell {
margin-bottom: 0;
margin-left: 1px;
float: left;
&.lg-4 {
width: 33%
}
}
}
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;
}
}