I have example like this, why is the button background changing to black while #media queries are not reacting to color-scheme property?
html {
color-scheme: dark;
}
#media (prefers-color-scheme: dark) {
body {
background: grey;
}
}
#media (prefers-color-scheme: light) {
body {
background: yellow;
}
}
<button>Toggle Color</button>
<p>testtext</p>
Related
I'm trying to not display different input tags for different devices.
I have three input tags <input class="desktop"/> <input class='tablet'><input class= 'mobile'>
I'm not displaying desktop and mobile input tags by adding the css like this:
.desktop {
#media(max-width: 767px){
display: none
}}
.mobile {
#media (min-width: 768px) {
display: none;
}}
I'm having difficulty restricting it for tablet though. My tablet dimensions are between 768px and 1024 px
I've tried doing this but it doesn't work:
#media (max-width:768px) and (min-width:1024px) {
display: none;
}
Any ideas on how I can control the input tag to only show between these dimensions?
It's just a syntax error. You need to put the class selector inside the media query like this:
#media (max-width: 767px) {
.desktop {
display: none;
}
}
See this example on w3schools
edited The media query just has the max-width and min-width the wrong way round. See below
/* apply at widths below 768px */
#media (max-width:768px) {
body {
background-color: lightskyblue;
}
.tablet, .desktop {
display: none;
}
}
/* apply from widths between 768px and 1024px */
#media (min-width:768px) and (max-width:1024px) {
body {
background-color: goldenrod;
}
.mobile, .desktop {
display: none;
}
}
/* apply from widths above 1024px */
#media (min-width:1024px) {
body {
background-color: lightseagreen;
}
.mobile, .tablet {
display: none;
}
}
<input class='mobile' placeholder="mobile">
<input class='tablet' placeholder="tablet">
<input class='desktop' placeholder="desktop">
I'm working on making my website responsive, but I encountered a problem.
I'm trying to hide a section to make it only phone visible, but as I try to set my display:none for my section and to enable it in my media query, it is overwritten by my non-media query code.
The 2 sections that I want to hide from PC users are .phone-services and .avis-phone. The problem is that, as I said if I state them as display:none, they will overwrite my media query.
Here is a part of my #media CSS:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
.services {
display:none !important;
}
.avis {
display:none !important;
}
.phone-services {
background:#02000A;
}
.avis-phone {
background:#02000A;
color:white;
}
}
Here is a part of the other CSS that overwrites it:
#import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');
* {
margin:0; padding:0;
box-sizing: border-box;
text-decoration: none;
outline: none; border:none;
font-family: "Shippori Antique B1" , sans-serif;
transition: .2s linear;
}
html{scroll-behavior:smooth !important}
a:visited{
visibility:hidden;
}
.phone-services {
display:none; /*Overwrites my media query*/
}
.avis-phone {
display:none; /*Overwrites my media query*/
}
HTML:
<section class="phone-services">
Section need to be shown only for mobile
</section>
<section class="avis-phone">
Section need to be shown only for mobile
</section>
Thanks for your help!
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait)
min-device-width and max-device-width are only for actual devices. If you try to simulate that on a desktop, it won't work for you. You should use min-width and max-width instead.
Secondly, -webkit-min-device-pixel-ratio: 2 is to check device resolution, but we have various devices which we cannot simply cover with a particular resolution. I'd suggest removing it.
Another problem is from here
.phone-services {
background:#02000A;
}
.avis-phone {
background:#02000A;
color:white;
}
You set display: none, but you don't set display: block (or any other visible display values)
Another point I'd like to note down that the style priority is TOP to BOTTOM when they have the same selectors. Your display style in media-query is above display: none like below, that will cause display problem too
#media {
.phone-services {
display: block; /*NOT WORKING*/
}
}
.phone-services {
display:none;
}
Full possible change can be
#import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border: none;
font-family: "Shippori Antique B1", sans-serif;
transition: 0.2s linear;
}
html {
scroll-behavior: smooth !important;
}
a:visited {
visibility: hidden;
}
.phone-services {
display: none;
}
.avis-phone {
display: none;
}
#media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
.services {
display: none !important;
}
.avis {
display: none !important;
}
.phone-services {
background: #02000A;
display: block;
}
.avis-phone {
background: #02000A;
color: white;
display: block;
}
}
<section class="phone-services">
Code in here
</section>
<section class="avis-phone">
Code in here
</section>
You always have to define display if you are hiding / showing them depending on #media, both in #media part and non-#media part.
Try adding it to the rules:
#media screen and ...
{
.phone-services {
background:#02000A;
display: block; // can be block, inline-block, flex...
}
.avis-phone {
background:#02000A;
color:white;
display: block; // can be block, inline-block, flex...
}
}
Note that if you have #media part loaded before the normal one, you have to make sure to load #media part after, so it does not get overridden, or you can use !important with the rule (not recommended).
Try to hide the slider background image in mobile screen:
#media screen and (max-width: 800px){
.home #mainSliderWrapper {
background-image: none;
}
.stlye {
background-image: none;
}
.img--holder {
background-image:none;
}
}
It wasn't working, can anyone help me ? The site is: https://uraniamedicalcenter.hu
The id is mainSliderWrapper.
Am i using wrong the class and the id ?
trying these too:
#media screen and (max-width: 800px){
.home #mainSliderWrapper {
background: none !important;
}
#mainSliderWrapper #mainSlider .slide .img--holder {
background-image:none;
}
#mainSlider .slide .img--holder {
background-image:none;
}
#mainSlider .img--holder{
background-image: none;
}
}
won't working
Try it:
#media (max-width:800px) and (min-width: 0px)
And use background, no background-image because in your code it's background
There is the CSS rule
.home #mainSliderWrapper{
background: 'imageURL' !important;
}
that you have to overwrite with your !important custom rule:
$('.home #mainSliderWrapper').css('{ background: none !important }');
Im trying to change the back ground for a specific post on a mobile wordpress page.
#media screen and (max-width: 940px)
#page {
max-width: 768px;
width: 100%;
margin: 0 auto;
background: #007A52;
box-shadow: 0 0 10px #999;
}
I know page id is used but im not sure how?
http://www.thedoughbros.ie/wp-content/plugins/contact-form-7/includes/css/styles.css
The file above has the following CSS and custom backgrounds for certain posts.
806 represents the post-id so if you want custom backgrounds just keep adding new blocks with different id
#media screen and (max-width: 940px) page.custom-background.page-id-806
/*--------------------------------------------------------------
Custom Backgrounds
--------------------------------------------------------------*/
body.custom-background.page-id-806 {
background-image: url( http://www.thedoughbros.ie/wp-content/uploads/2015/05/menubackground.fw_.png);
}
body.custom-background.page-id-723 {
background-image: url(http://thedoughbros.ie/wp-content/uploads/2015/03/VAN3.fw_.png);
}
body.custom-background.page-id-822 {
background-image: url(http://thedoughbros.ie/wp-content/uploads/2015/03/Restaurant3.fw_.png);
}
#media screen and (max-width: 940px) page.custom-background.page-id-806 {
background: #fff !important;
}
body.custom-background.page-id-346 {
background-image: url(http://thedoughbros.ie/wp-content/uploads/2015/06/14jun.fw_.png);
}
Just add new blocks of CSS
#media screen and (max-width: 940px) page.custom-background.page-id-807 {
background: #fff !important;
}
#media screen and (max-width: 940px) page.custom-background.page-id-808 {
background: #fff !important;
}
#media screen and (max-width: 940px) page.custom-background.page-id-809 {
background: #fff !important;
}
Or multiple
#media screen and (max-width: 940px) page.custom-background.page-id-807, page.custom-background.page-id-808, page.custom-background.page-id-809, page.custom-background.page-id-810 {
background: #fff !important;
}
I have a floating banner I want to display over 50% of the width of large screens and 100% of the width of small screens (mobile devices).
The image is sometimes very small (I think on retina displays).
How can I improve my code to display correctly on retina displays, large screens, and small mobile device screens?
In the .css
.banner-sticky {
bottom: -2.5px;
left: 0px;
width: 100%;
text-align: center;
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0);
/* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/
}
.advert-img {
width: 50%
height: auto;
}
#media screen and (max-width: 380px) and (orientation: portrait) {
.advert-img {
width: 100%;
}
}
In the .html file
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.
.
.
<div id="sticky" class="banner-sticky" style="position: fixed;">
<a id="ad-link" href=' #' ><span id="banner-ad"><img src=' foo.jpg' class="advert-img" /></a>
</div>
'<a id="ad-link" href=' + this.landingUrl + ' ><span id="banner-ad"><img src=' + this.imgSrc + ' class="advert-img" /></a>'
You can use CSS media queries to distinguish the screen width, like this:
body {
background: url(foo-small.jpg);
}
#media (min-width: 500px) {
body {
background: url(foo-medium.jpg);
}
}
#media (min-width: 800px) {
body {
background: url(foo-large.jpg);
}
}
In order for this to work, you need to set the image as background in CSS, not as a <img> tag
Try using background-size css rule for every resolution
body {
background: url(foo-small.jpg);
}
#media (min-width: 500px) {
body {
background-size:50%;
}
}
#media (min-width: 800px) {
body {
background-size:80%;
}
}