Hopefully my title isn't too confusing. Anyways, I'm still learning CSS and right now I'm in the process of creating a mobile version of my company's site. I currently want to modify our navigation bar and the CSS for the navigation is a bit lengthy. So right now in the CSS file there is
.nav { /*styles*/ }
.nav ul { /*more styles*/ }
.nav li { /*more <s>beer</s> styles*/}
/*and so on*/
Is there anyway to have it so the mobile version of the site ignores all #nav selectors from the original file regardless if I made a new selector in the mobile css? Or do I have to override each selector in the original css with new ones in the mobile css?
You can create your stylesheets with media attributes, like so:
<link rel="stylesheet" media="screen" ... etc./>
The fragment above references a normal browser window.
Here's where you can find out about those: http://www.w3.org/TR/CSS21/media.html
I would suggest separating the contents of your regular and mobile styles into separate stylesheets, like this:
Base: Styles common to both.
Regular: Styles only for the main site.
Mobile: Styles only for the mobile site.
Base is always included. Only regular or mobile is then included depending on the device viewing. That way you don't have to worry about overriding styles in one just to "reset" styles from another.
You can use the media property in your stylesheet link elements to determine when a stylesheet gets loaded.
You have to provide two different style sheet files and import them specifying a media type
<link rel="stylesheet" href="/all.css">
<link rel="stylesheet" media="screen" href="/computers.css">
<link rel="stylesheet" media="handheld" href="/mobile.css">
Alternatively you can use just one css file, in this way
#media print {
body { font-size: 10pt }
}
#media screen {
body { font-size: 13px }
}
#media screen, print {
body { line-height: 1.2 }
}
In your specific problem, you could just add #media screen at the beginning of the .nav definitions.
#media screen {
.nav { /*styles*/ }
.nav ul { /*more styles*/ }}
.nav li { /*more <s>beer</s> styles*/}
}
Related
Recently I purchased a website template, and I have never been good at CSS so I am finally trying to understand. I have googled, but have not found if this is possible, so I am assuming its not, but I figured I would ask anyway.
CSS files:
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/custom-style.css">
There are some tags in the custom-styles.css that are overriding things in bootstrap.min.css. All good and well and working as expected.
However I am currently working on a page, and I want it to defer back to what is in boostrap.min.css for like 10 elements. I dont want to change the custom-styles.css so is there a way I can do something like the following:
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/custom-style.css">
<link rel="stylesheet" href="assets/css/my-style.css">
and in my-style.css have something like:
.abc .def {
defer to boostrap.min.css
}
or
.abc .def {
ignore custom-style.css
}
Thanks,
Brian
In my-style.css override those classes with content that is in bootstrap.
example
In bootstrap you have
.foo {
color: red;
}
and In custom-style you have
.foo {
color: green;
}
then in my-style.css do something like this
.foo {
color: red;
}
and make it override previous declarations or simply (less recommended)
.foo {
color: red !important;
}
You could give the body (or main container) of your special page a distinct class, let's say .special-page, and then in your custom-style.css write your overrides like
:not(.special-page) .abc .def {
/* your special style
which doesn't get applied
if the element is
within .special-page */
}
Lear more about the :not() selector: https://css-tricks.com/almanac/selectors/n/not/
You could try to comment out unnecessary code if you do not want to remove them. That should automatically make use of the Bootstrap code instead of the CSS. For example, if your CSS looks like:
.abc .def {
Some code.....
}
You should comment them out like:
.abc .def {
/* Your code */
}
Or:
/*
.abc .def {
Your code.....
}
*/
That should work.
I'm trying to hide an image when the screen/viewport has a width over 900px. For some reason, this is not working in a very basic example.
I have an extremely simple component for my footer -- it's functional, no state or methods, and it's only nested under the Main component.
I'm including the styles for the footer in the component so it's completely localized. For some reason, in this most basic example, #media doesn't seem to be working.
When I open Chrome devtools, I do see the media query being attached to my element at the appropriate breakpoint, but the style is not being applied even though my screen width is well over 900px. The styles declared in my media query are crossed out. So my element is choosing to maintain the original styles and blocking the media query for some reason. If I add a style in the media query that is not already present in the original class, it is applied.
I have included the following in head in index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
I'm also using React Router (if that makes any difference).
Is React preventing media queries from working? Am I making an extremely dumb mistake somewhere?
Here is my component -- the div with className 'logo' is what I'm trying to toggle:
import React from 'react';
import { Link } from 'react-router-dom';
import './footer.component.css';
function Footer(props) {
return (
<div className="footer">
<span className="column">
<div className="social-column-container">
<img className="logo" src="./images/logo.jpg" alt="kimbyarting logo" title="kimbyarting logo" />
<div className="social-icon-container">
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
</div>
</div>
</span>
</div>
);
}
export default Footer;
Here's the relevant CSS:
/* Small desktop */
#media only screen and (min-width: 900px) {
.footer
.column
.social-column-container
.logo {
display: none;
}
}
/* Mobile */
.footer
.column
.social-column-container
.logo {
width: 100px;
height: auto;
display: inline-block;
margin-left: 50px;
}
Any help is greatly appreciated!
Update
If the regular class definition and media definition have the same class hierarchy, the media styles are always overridden. However, if the regular definition has any fewer class hierarchies defined, this works.
I've confirmed, by removing all parent 'display' styles, that no other class immediately seems to be causing the style to override.
What is overriding the styles? Why is this happening when I follow best practices and have a good hierarchy defined for CSS classes?
It's not the problem with react its with the css code. If you apply two rules that collide to the same elements, it will choose the last one that was declared. So put the #media queries to the end of the css page. i.e
.footer
.column
.social-column-container
.logo {
width: 100px;
height: auto;
display: inline-block;
margin-left: 50px;
}
#media only screen and (min-width: 900px) {
.footer
.column
.social-column-container
.logo {
display: none;
}
}
I had some issues starting from a ReactJS perspective, but it turned out to be a Chrome issue.
For Chrome specific issues not applying your CSS media queries (and not the issue as answered above), add this in your <head> section.
<meta name="viewport" content="width=device-width,initial-scale=1">
I had the same issue but after putting media queries below all the CSS code it is working smoothly. It's because when you apply styles to same elements CSS will choose the code which was declared in the last.
Here's the css code:
#media (max-width:600) {
body{
background-color:red;
}
}
p{
color:blue;
}
The problem is that the #media part doesn't work at all. I tested it on 3 devices (including PC) and tried to change my browser's window size. However, when I change (max-width:600) on screen, the whole thing works. What could be wrong? In addition, adding media='max-width:600' to <link> tag causes css to crash (the entire css doesn't work at all in this case) – what is this??
P.S.: the code above and adding media='....' works within codecademy.com codebit, but doesn't work on my site, where I test the whole thing. (http://peoples.pw)
You're missing the unit. I guess you're using pixels, so it'd be something like this:
#media (max-width:600px) {
body{
background-color:red;
}
}
p{
color:blue;
}
Demo: http://jsbin.com/fovesaci/1/
Edit: About the second question, you need to place it in parentheses. So this media='max-width: 600px' should be something like this media='(max-width: 600px)'.
It's a reasonable mistake since media attr has been mostly used for print, screen or all which have no parentheses at all.
use <meta name="viewport" content="width=device-width; initial-scale=1.0;" /> in <head> tag
and css use px in width
#media (max-width:600px) {
body{
background-color:red;
}
}
p{
color:blue;
}
I am working in Joomla and the CSS that comes with a third-party has the following CSS code that is causing a conflict and I was told to have it removed:
[class*="span"] {
float: left;
margin-left: 20px;
min-height: 1px;
}
I don't want to remove this from the "core" of the third-party component because when an update comes in, it will overwrite this. I normally put in CSS I want to override in the template's custom.css file with !important and that has worked.
Is there a way, perhaps using !important to do the equivalent of removing the above block of CSS code so it doesn't function? I'm not a CSS expert, but is there a way of putting this in the custom.css that would make this CSS block non-functioning so it doesn't interfere? Thanks!
Yes
[class*="span"] {
float: none !important;
margin-left: none !important;
min-height: none !important;
}
But, unless there's a JS plugin loading that CSS on page load, there's no need. Include your CSS after the third-party's version, which you should always do anyway.
[class*="span"] {
float: none;
margin-left: none;
min-height: none;
}
Example HTML
<link href="/css/joomla.css" rel="stylesheet" />
<link href="/css/third-party.css" rel="stylesheet" />
<link href="/css/custom.css" rel="stylesheet" />
custom.css rules will override third-party.css rules.
One way I would do it to give CSS class to my body. Say "myCustomClass" then.. override the above class as follows:
.mycustomclass [class*="span] {
add properties
}
Example: http://jsfiddle.net/ankitvijay/n4Enb/
I'm facing some layout issues with a print stylesheet in webkit-based browsers, and I was wondering if there was a CSS selector, or another way to do a CSS hack to only target webkit / media print?
The classical webkit-min-device-pixel-ratio media query selector isn't working for printing.
So what's the printing equivalent to this CSS Hack? (changing the media to print, isn't working):
#media screen and (-webkit-min-device-pixel-ratio:0) {
}
You could use javascript to load CSS files for WebKit browsers only.
<head>
<link rel="stylesheet" id="hacks"/>
<script>
if(navigator.userAgent.indexOf("WebKit") != -1) {
document.getElementById("hacks").href="hacks.css";
}
</script>
</head>
You could include a stylesheet that will only be used for webkit browsers like so:
#media print and (-webkit-min-device-pixel-ratio:0) {
.black {
color:black;
}
}
There are similar features in other browsers.
Use webkit-any-link instead:
#media print
{
* > /**/ #foo, x:-webkit-any-link { padding-top: 200px; }
}
The * > /**/ selector is used to filter IE7, and can be removed if it's unsupported:
#media print
{
#foo, x:-webkit-any-link { padding-top: 200px; }
}
References
Issues for Level 4 [CSS Working Group Wiki]
CSS Selectors Level 4: The Path to CSS4
Reveal New Window Links and Links to Non HTML Files with a User Stylesheet