media query not overriding default css - css

tried to find a solution but didn't find a similar case!!
in order to prevent adding a class name for each page, i would love t use a generic class name just like bellow:
<div id="news">
<div class="news column">content 1</div>
<div class="news column">content 2</div>
...
</div>
#news .news {
float: left;
width: 50%;
}
#media only screen and (max-width: 767px) {
.column {
clear: both;
width: 100%;
}
}
the default css are not overridden, and the 2 solution i came up with are:
1- use !important, but i'm not a big fan!
2- use the exact class name as in the original css which is "#news .news"
Do you please have something else in mind that can solve this issue??
Thank a lot in advance

In CSS an #ID is more important than a class. Therefore here your class rules will not override the ID ones even though you declare them after.
You can fix your whole problem just by taking note of that.
This is a very important thing in CSS.
#media screen and (max-width: 767px) {
#news .column {
float: none;
clear: both;
width: 100%;
}
}

Related

How to increase specificity weight

<td class>
<div class="browser indicator">
<div class="mobile indicator">
In this code, the class indicator has a display:inline-block. How do I increase the specificity weight of the class browser and mobile so I can give them a separate value for display?
You can do that by specifying both classes "chained", meaning browser when it has indicator as well use this style.
.browser.indicator {
}
.mobile.indicator {
}
The important part for you is to not have the space between the classes because doing this will style children with the class indicator
.browser .indicator {
}
.mobile .indicator {
}
U can use this one:
.indicator {
display:inline-block;
width: 100%;
}
#media only screen and (max-width: 600px) {
.indicator {
display: block;
}
}
if screen size will be less 600px all styles which u have at #media will provide for page.

How to fix grid when there are columns of different sizes?

I have build a custom grid with the following below similar to what is found on Creating Your Own CSS Grid System.
When I try to display four items in two rows as two columns in each (tablet-col-6), the first two items will be aligned properly, but the third item will be misaligned and the fourth item is on another row. It is mainly due to the fact that the columns have different heights for each column. Using Bootstrap's grid system is not an option.
How can I resolve this issue?
.container {
width: 100%;
max-width: 1200px;
}
.container * {
box-sizing: border-box;
}
.row:before,
.row:after {
content:"";
display: table;
clear:both;
}
[class*='col-'] {
float: left;
min-height: 1px;
padding: 16px;
}
#media screen and (min-width: 320px) {
.mobile-col-12 {
width: 100%;
}
}
#media screen and (min-width: 768px) {
.tablet-col-6 {
width: 50%;
}
}
#media screen and (min-width: 1200px) {
.desktop-col-12 {
width: 25%;
}
}
.border {
border: 1px solid black;
}
<div class="container outline">
<div class="row">
<div class="mobile-col-12 tablet-col-6 desktop-col-3 border">Compellingly expedite intermandated paradigms via out-of-the-box architectures. Enthusiastically transition vertical networks after multimedia based best practices. Completely predominate principle-centered.</div>
<div class="mobile-col-12 tablet-col-6 desktop-col-3 border">Enthusiastically benchmark cooperative information through proactive methods of empowerment. Completely syndicate alternative.</div>
<div class="mobile-col-12 tablet-col-6 desktop-col-3 border">Progressively recaptiualize quality convergence through extensive innovation. Uniquely utilize.</div>
<div class="mobile-col-12 tablet-col-6 desktop-col-3 border">Proactively pursue quality leadership skills with innovative processes. Quickly actualize dynamic.</div>
</div>
</div>
Current output
Desired output
A couple of things need to be fixed:
The selectors in the the media queries are missing . e.g. replace mobile-col-12 with .mobile-col-12
Clear the floats on every first item of the row. And you must cancel the previous clearings within different breakpoints if needed.
Below is the updated part of media queries:
#media screen and (min-width: 320px) {
.mobile-col-12 {
width: 100%;
}
}
#media screen and (min-width: 768px) {
.tablet-col-6 {
width: 50%;
}
.tablet-col-6:nth-child(2n + 1) {
clear: both; /*clear floats*/
}
}
#media screen and (min-width: 1200px) {
.desktop-col-3 {
width: 25%;
}
.desktop-col-3:nth-child(n) { {
clear: none; /*cancel clearing*/
}
}
codepen
Floats are outdated for creating layout, consider using Flexbox, CSS Grid instead.
Let's try a simple experiment that adds flexbox-based equal-height columns to Bootstrap's grid system.
The row uses the custom .row-eq-height class defined in this example's CSS to make all of its columns automatically be of equal height.
All of the columns will stretch vertically to occupy the same height as the tallest column , so the next one will be perfectly left aligned.

How does one add padding to Bootstrap 3's container without screwing up the grid?

Many site designs call for a dark background with a lighter foreground page that contains the site's content. When using Bootstrap, it seems logical that one would merely apply the light color to the .container div and be done with it. However, Bootstrap's container does not provide any padding between its edges and the columns within, so this solution provides a light background but with the column content flush with the edges - not a good look.
This is a common problem and there are several solutions on stackoverflow and elsewhere for Bootstrap 2, but I couldn't find anything useful for Bootstrap 3.
One of the Bootstrap 2 solutions involved using .container-fluid which switches the internal grid from pixel to percentage based. Then one may apply padding to a a background div within .container-fluid and the internal columns will seamlessly adjust to fit. This seemed like a good approach, but the specific CSS used to tweak some of the other styles didn't work with Bootstrap 3.
After digging through the Bootstrap source, I noticed that the only difference between the .container and .container-fluid rules, in grid.less are three media queries. I wrapped my page's content in .container-fluid then overrode its definition with one that included the media queries so that the page content would respond the same as the header and footer, which use the standard .container.
Here's the HTML:
<html>
<head>
<title>Bootstrap 3 Container Padding Example</title>
</head>
<body>
<div class="page-container">
<div class="container-fluid">
<div class="page-bg">
<!-- PAGE CONTENT -->
</div>
</div>
</div>
</body>
</html>
And then the .less:
.page-container > .container-fluid:first-child {
.container-fixed();
#media (min-width: #screen-sm-min) {
width: #container-sm;
}
#media (min-width: #screen-md-min) {
width: #container-md;
}
#media (min-width: #screen-lg-min) {
width: #container-lg;
}
}
Then added padding to the .page-container div:
.page-container {
.page-bg {
padding: 15px;
background-color: #EFEFEF;
}
}
body {
background-color: #333
}
This seems to work. I haven't completed the styling for the interfaces that will reside within this container yet so there could be issues down the road but everything seems to render fine so far.
Here is a working example of this solution on codepen.io.
Note that the solution above uses less.css after including Bootstrap's variables and mixins .less files. Here's the compiled CSS:
.page-container > .container-fluid:first-child {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
#media (min-width: 768px) {
.page-container > .container-fluid:first-child {
width: 750px;
}
}
#media (min-width: 992px) {
.page-container > .container-fluid:first-child {
width: 970px;
}
}
#media (min-width: 1200px) {
.page-container > .container-fluid:first-child {
width: 1170px;
}
}
.page-container .page-bg {
padding: 15px;
background-color: #EFEFEF;
}
body {
background-color: #333333;
}

Media Query Styles Not Overriding Original Styles

I'm attempting to use some media queries for a website I'm building. The problem I'm having however, is while the media query styles are actually being applied, they're being overridden. I can't for the life of me tell why because I'm using the same exact selectors. Can anyone point out something that I'm not seeing?
ORIGINAL CSS
#global-wrapper-outer > #global-wrapper-inner {
width: 85%;
height: 100%;
margin: 0 auto;
position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 4px 2px -2px gray;
}
MEDIA QUERY CSS
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
The second media query is working fine, where I set the nav to have a display of none. However, when I try to set the width of #global-wrapper-inner to 100% it doesn't apply. I can see the style being "applied" when I press F12 and select that element. However, the style itself is crossed out and not actually applied and it still has the original width of 85%.
The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.
The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.
To have the first media query selector take precedence, prepend an ancestor element to it:
#media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
You need to link the media query file (queries.css) later than the normal css file (style.css). That way the rules in the queries.css will override those in style.css.
I have been at least 2 hours trying to find the override CSS problem till I found that my line comments where wrong... And the second definition of CSS wasn't working:
So, don't be so stupid as I !:
/* LITTLE SCREENS */
#media screen and (max-width: 990px) {
... whatever ...
}
/* BIG SCREENS */
#media screen and (min-width: 990px) {
... whatever more ...
}
never use: Double bar as I did:
// This is not a comment in CSS!
/* This is a comment in CSS! */
Here is the answer. (at least what worked for me)
I've had this problem before, and it took me a while to realize what I did, but once I figured it out it's actually pretty easy.
Ok so imagine I have this as the html
<main>
<div class = "child1"> </div>
<div class = "child2"> </div>
</main>
and then this as the CSS
main .child1{
height: 50px;
}
/* now let's try to use media quaries */
#media only screen and (max-width: 768px) {
.child1{
width: 75%;
}
}
The code above won't affect the .child. Just like someone mentioned above, the main .child1 overrides .child1. So the way you make it work is to select the element just like we did at the very beginning of the CSS above.
/* this will work */
#media only screen and (max-width: 768px) {
main .child1{
width: 75%;
}
}
So as a conclusion... select the elements the same way every time.
Meaning ... for example in the above code, in your CSS, you should either select it as main .child1throughout the whole CSS or .child1 or else they get mixed up, one ends up overriding the other.
From the code you submitted, this probably won't resolve your issue. However, in your CSS if you are nesting styles inside of one another:
.main-container {
.main {
background: blue;
}
}
A media query for .main won't work because of the nesting. Take .main out of .main-container and then the media query will work as assumed:
.main-container {
}
.main {
background: blue;
}
Check if your media query braces are equal.
Sometimes it is very subtle but when you miss a single brace the rest of the media queries mentioned for certain break points will not work
example:
#media(min-width: 768px) and (max-width: 991px){
#media (max-width: 767px){
.navbar-brand p {
font-size: .6em;
margin-top: 12px;}
.navbar-brand img {height: 20px;}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span {
font-size: 1.2em;}
}
Here you can see i have started the braces for max-width:991px but forgot to end so the next set of codes in media query for max-width:767px will not work.
It is a very simple mistake but took hours because of lot of braces in the codes.
Hope it helps. Happy Coding!
What about using !important? If you range your media query from ( min-width: 176px ) and ( max-width: 736px ) or even up to 980px?
There can be some reasons because of which this type of error may occur.
I myself faced this issue where I was not able to understand what I am needed to do and was confused that, does media query just overrides the elements.
Here's what I understood:
MEDIA QUERY CSS:
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
here you were able to override #global-wrapper-inner > nav i.e., 2nd media query selector, by display: none;
because you never added the display line in the original css, because of which there was nothing to override you just have given that display type should be none.
Whereas just in the 1st media query selector you already had given width:80%;
Basically media query doesn't override as far as I have understood but it take precedence, like already explained by one of them
by which media query comes to work:
https://stackoverflow.com/a/19038303/15394464
also if still did not get your doubt clear, https://www.youtube.com/watch?v=acqN6atXVAE&t=288s
then this might help.

Why does placing a CSS class above others completely change other unrelated classes?

So I have the following at the top of bootstrap.css
.scrollable-table {
height: 800px;
overflow: scroll;
}​
.top-buffer { margin-top:20px; height:150px;}
.cat-title { background-color:gray; margin-top:0px; }
scrollable-table changes the look of some of my other html while doing what I need it to do. Specifically from what I can tell the height in .top-buffer is whats being changed. When I move it under those first two it works as expected without causing any issues. So this
.top-buffer { margin-top:20px; height:150px;}
.cat-title { background-color:gray; margin-top:0px; }
.scrollable-table {
height: 800px;
overflow: scroll;
}​
Where I use scrollable-table is here
<div class="span4 scrollable-table" style="background-color:white">
scrollable-table is also only ever used there!
For good measure I'll also show where top-buffer is used
<div class="span3 top-buffer" style="background-color:#DBDBDB">
I just don't understand how a completely unrelated class to the other two can change things so drastically. I understand that CSS cascades the styles, but in this case it makes no sense because they are not related. I should mention this is Twitter Bootstrap, and is at the very top over what CSS was already there. I'm hoping someone coud shed some light on why this.
The order of the classes in the stylesheet (but not in the HTML) matters because the stylesheet is read top to bottom. If you have two classes in this order:
.a { color: blue; }
.b { color: red; }
Both of these elements will be red:
<div class="a b">Test 1</div>
<div class="b a">Test 2</div>
But if you swap them around, both will be blue:
.b { color: red; }
.a { color: blue; }

Resources