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;
}
Related
My site: https://www.gameron.pl/
I need to make the theme like in the screenshot for the resolution 719px and below:
I mean posts list of course. I tried to achieve it with various codes, but each works only on one resolution and is not adjusting to other resolutions.
Here's what works:
#media (max-width:719px){
/* Thumbnail Image */
.main a .wp-post-image{
width:50%;
}
}
Now I just need to move and adjust post title properly. Does anyone have an idea how can I do it? I feel like I tried everything.
The problem is your .post-thumbnail has float:none, and your .post-content has float:left.
I changed it in the console so both float:left and width:50% and it works fine:
https://i.imgur.com/Q8BFev0.png
#media only screen and (max-width: 719px) {
.post-list .post-thumbnail {
float: left;
max-width: 50%;
}
.post-list .post-content {
float:left;
width: 50%;
}
}
You can do it as follows:
#media only screen and (max-width: 719px) {
.main .post-list .post-thumbnail,
.main .post-list .post-content {
float: left;
width: 49%;
}
.main .post-thumbnail {
margin-right: 0.5em;
}
}
Result
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'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%
}
}
}
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; }
}