#media screen and (max-width: 1336px) {
.rectangle-box {
visibility: visible;
}
#p-cactions {
top: 461px;
left: 410px;
}
}
#media screen and (max-width: 1040px) {
.rectangle-box {
visibility: hidden !important;
}
#p-cactions {
top: 461px !important;
left: 1110px !important;
}
}
I put these on the top of a css files code and they work but when i put them on the bottom of the code in the css file they dont work at all. Why is my css working in reverse? im using chrome. the css file is main.css for monobook skin in mediawiki. I guess its good i got it to work im just curious.
You must not edit main.css or hack other code code directly! The results are not predictable.
Use the gadgets extension and manage your JS/CSS directly on your wiki. There are gadget options to make them top-loaded if needed.
If you want to do more complex things server-side, read the developing with ResourceLoader doc page. It also has advice on media queries and what to top-load.
I have already figured out a way to make this all work in main.css in a very predictable way. thanks but i have already solved the problem. I changed #media screen to #media. i placed this at the bottom of the css file and it works.
Related
I am calling 2 different css files. Two css properties are conflicting. But this is ignored even though the 2nd css part is more specific. Where is the problem? I looked at the CSS hierarchy. But it was supposed to run smoothly this way...
I'm not sure if this problem is related to the order of calling the CSS file.
Ignored
#media (max-width: 500px) {
div.fb_dialog.fb_dialog_mobile>.fb_dialog_content iframe:not(.hs-form-iframe) {
width: 60px !important;
height: 60px !important;
}
}
Acceptable
#media (max-width: 500px) {
iframe:not(#tidio-chat-iframe):not(.hs-form-iframe) {
width: 100% !important;
height: 100% !important;
}
}
I went through the hierarchy details and solved the problem. If anyone else has this problem later, I leave the solution here. No matter how specific the selector is in CSS, the ID selector is always more dominant. To fix the problem, I just had to add id to the ignored CSS. I figured it out with the specificity calculator. It works perfectly now.
I know this may seem like a very simple question, but please understand I know very little about CSS.
Essentially, I have a responsive website with two columns. I want to add an ad on the right for Desktop, and one of the left for Mobile. So far so good, I only have to copy and adapt the code they provide on their website, and this did work for mobile, hiding the ad:
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
#media (max-width: 400px) { .adslot_1 { display: none; } }
</style>
<ins class="adsbygoogle adslot_1"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
However, how can I adapt this for desktop? I assumed all I had was to change the max-width: 400px to min-width, but it doesn't seem to be working at all... any ideas on why, and how can I fix it?
In many cases scripts that insert content dynamically tend to modify the element's inline CSS properties and that usually overrides the style definitions, because of specificity. You can learn more on specificity in CSS on MDN.
What I would recommend you to do is to add !important to your style definition to see if that does hide the element. Your style should look something like: (I added some extra info to the #media query.
.adslot_1 {
display:inline-block;
width: 320px;
height: 50px;
}
#media only screen and (max-width: 400px) {
.adslot_1 {
display: none !important;
}
}
What you could also do is open your browser's inspect tools (developer tools) and inspect that specific element to see which styles are being applied and also check that based on media query.
can someone please help me about this Wordpress CSS problem. On the checkout page the payment methods float right and for some reason the method description text is 'vertical', instead of having sentences in the full row, only 2 or 3 letters appear in each row (image included).
When I change the window size (and on mobile) everything looks okay.
Can anyone help me with some css code which would fix this? I don't know how to edit stuff that isn't in styles.css.
The problem
when i resize the window / mobile screen
The link:
https://zelenakuca.com/checkout/
Thank you!
Paste media code with style before line code
</style><noscript><style type="text/css"> .wpb_animate_when_almost_visible { opacity: 1; }</style></noscript></head> in index page or file.
#media (min-width: 1025px)
{
#order_review {
width: 100%;
}
}
Please try these CSS:
#media (min-width: 1025px){
#order_review {
float: none;
width: 100%;
}
}
I need to make a website responsive built in 2012. I'm editing the style.css file (Wordpress website) but the media query doesn't work for some reason. Already checked the css file online, and the media query is in it.
The website I'm talking about is www.carter-realestate.be
There is nothing wrong with the media query, I've done this a hundred times before.
The style.css file with the media query is online, so you can check it out.
Anybody knows an explanation for this?
You need to add a space between "and" and "("
#media screen and (max-width: 900px){
Trying changing it to:
#media only screen and(max-width: 900px){
body{
background-color: red !important;
color: blue;
}
h1{
font-size: 15em;
}
}
There's some script on your page that's re-writing the #media rules.
Looking at your source code in style.csss I see:
#media all and(max-width: 900px){
body{
background-color: red !important;
color: blue;
}
h1{
font-size: 15em;
}
}
But checking it out in Firebug (via Firefox) I see the code changed in the DOM to:
#media not all {
body {
background-color: #FF0000 !important;
color: #0000FF;
}
h1 {
font-size: 15em;
}
}
Somewhere a script is re-writing the #media rules to "not all".
Try disabling all scripts in the WordPress plugin and refresh the page. If that doesn't work, edit the HTML and comment out any remaining scripts loading. Then add a script or plugin back in one by one until you find which is re-writing the DOM.
When I put the code below through the CSS Linter I get six errors. Are these bugs in the linter or the CSS? I can't see anything wrong with the CSS. I can't seem to turn off or ignore the errors either regardless of the settings.
#media ( max-width: 320px ) {
.test {
padding: 20px;
}
}
I only had to remove the spaces for it to pass:
#media (max-width:320px) {
.test {
padding: 20px;
}
}
Your code is valid it's just that css link is being picky about the formatting.
If you change it to the following it's quite happy with it:
#media(max-width:320px){.test{padding:20px;}}
I'd recommend using this site to validate your css:
http://jigsaw.w3.org/css-validator/