I have a div on a page, the buttons on other browsers are neatly placed but on chrome, they are falling down.
I am aware of explicit hacks for IE 7 which is like *Margin, but not aware about chrome.Is there a way to define in css.
i dont want conditional statements to deal with this.I need to explicitly mention margin in negative pixels for chrome to pull the buttons up.
This jQuery should add class="chrome" to the html element of your document.
$(document).ready(function(){
if (navigator.userAgent.indexOf('Mac OS X') != -1) {
if (/chrome/.test(navigator.userAgent.toLowerCase())) { $('html').addClass('chrome'); }
} else {
if (/chrome/.test(navigator.userAgent.toLowerCase())) { $('html').addClass('chrome'); }
}
});
You can then target the div like so:
.div {
margin-bottom: 10px;
}
html.chrome .div {
margin-bottom: 20px;
}
this worked like a charm
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.act .now {
margin: -14% auto 0px;
}
/* Safari only override */
::i-block-chrome,.act .now {
margin: 5% auto 0px;
}}
Related
I have a documentation for my app in readthedocs website. And I have a .css file that changes side bar appearance. About three month ago this .css file worked well, but now it doesn't. Here is the link.
That is how it looked like:
That is how it looks now:
The .css file:
/* Fixes the size of the RTD flyout */
/* .rst-versions {
width: 320px !important;
} */
/* Content area color */
.wy-nav-content {
background: #dddddd;
}
/* Scroll Bar*/
.wy-side-scroll {
width: auto;
overflow-y: auto;
margin-top: 0px;
}
/* width of the side panel */
.wy-nav-side {
width: 320px;
}
/* content section full screen */
.wy-nav-content {
max-width: none;
}
/* set color of left side bar */
.wy-nav-side,.wy-side-nav-search,.wy-nav-top {
/*background: #0079c1; /*005eb8 */
background: #006464;
}
/* Change caption color to be more legible */
.wy-menu > .caption > span.caption-text {
color: #ffcccc;
font-size: 20px;
}
/* Change the version color to match caption color */
.wy-side-nav-search>div.version {
color: #ffcccc;
}
/* Get rid of that ugly yellow highlight color and replace with something more appealing to the eye */
.highlight .hll {
background-color: #fcfcfc;
}
/*
#media screen and (max-width: 768px) {
.wy-nav-content-wrap {
margin-left: 0px;
}
.wy-nav-side {
width: 500px;
}
} */
What could be the reason of this? Thanks!
I partially confirm what #Steve Piercy says in the comment. The rule .wy-menu > .caption > span.caption-text { doesn't work anymore, since the <p> that surrounds the <span class="caption-text"> no longer has a caption class. You can check that by comparing latest with 1.3.4-branch.
However, as you can see from the build logs (old, new), the problem is not with sphinx-rtd-theme (you are using 0.5.0 in both), but the docutils version (0.16 in the old build, 0.17 in the new build). You will need to either upgrade your Sphinx version, or downgrade docutils.
Intro
this is similar to this question but unfortunately the answer only applies to greasmonkey (which only works on firefox). Further, this was asked on the stylish forum but the answer was ambiguous.
Question
I want to remove the left column in the azure help page and
expand the main body to make it cover the widht of the screen.
The first part can easily be done by this
#sidebarContent {display:none}
How ever the second part must conver this
media (max-width: 1199.99999px)
to this
media (max-width: 100%)
But I have no idea how to do that using stylish.. ideas?
To override a media query you just need to load another media query - that also applies to your device - after it.
Well...you want a blunt media query that applies to everything. The best way is to use #media (min-width: 1px) since that includes all devices.
Now, put it all together - along with some other CSS cleanups like padding and margin removal and setting a new width for .mainContainer and you get this
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer {
margin: 0 auto;
width: 100vw;
padding: 0;
}
body>.container {
padding: 0;
}
}
New code: (with different selector for width)
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer { /*example styles*/
margin: 0 auto;
width: 100vw;
}
body>.container {
padding: 0;
}
body>.mainContainer>main {
max-width: 100vw!important;
}
}
You still have to adjust the padding to your preference as setting the padding to 0 breaks the design a little bit but this should be good starting point.
Before:
After:
My app generates printed reports by creating an invisible iframe and then printing it. My latest in a depressingly long list of problems I'm trying to solve is optimizing the CSS for different printed page sizes. IE9 seems to work a bit (but has other issues, like ignoring #page { margin:... }), but no luck at all on FF or Chrome.
My code looks like this:
#media print and (width: 210mm) and (height: 297mm) {
... stuff for A4 size ...
}
#media print and (width: 8.5in) and (height: 11in) {
... stuff for US letter size ...
}
Neither of these rules is being matched, ever, in Chrome or FF. I also tried device-width and device-height, and those didn't work either (they seemed to be reporting the absolute maximum sizes of the printer, rather than the page size). I can't figure out what value "width" and "height" are returning, is there a way to tell?
Is there a reliable way to detect printed page size using media queries? I'm pretty close to concluding that there is simply no way to control printing in any consistent way across browsers, and throwing in the towel on this.
Just try this code May be this can fixed your problem.
<page size="A4"></page>
Css
#page {
size: A4;
margin: 0;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 12px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 210mm;
height: 297mm;
}
#media print {
body {
margin: 0;
box-shadow: 0;
background: rgb(204,204,204);
}
}
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.
I have a class with the following attributes
.vote{
position:absolute;
margin: 53px 3px 0 60px;
}
But i want to give the margin: 53px 3px 0px 60px in firefox and
margin:53px 3px 0 115px in chrome. What i have to do for that using conditional comments
You can do this by css condition
body{background-color:#0FF; } /* for normal browser */
#media screen and (-webkit-min-device-pixel-ratio:0) { body{background-color:#F90;} } /* for webkit browser like crome, safari */
#-moz-document url-prefix() { body{ background-color:#090;}} /* for firefox */
but this is not a valid css
You can use JavaScript for detecting the users browser via userAgent, than according to the result you can aply the needed style.
function getBrowser()
{
var browser = navigator.userAgent;
if (browser.toLowerCase().indexOf('msie') > -1) return 'ie';
else if (sBrowser.toLowerCase().indexOf('firefox') > -1) return 'firefox';
else return 'mozilla';
}
You just need to check the possible browser names than return the name of it.