I created a class in a wordpress css file
.leftfloat{ float:left; padding-right:10px; }
I use it in the posts to wrap text around images like so:
<div class ="leftfloat" > image code or ad code </leftfloat>
It's working on PC and mobile devices. However, I want to disable this float in mobile devices. So I did this:
There is already #media defined in the template, I just added .leftfloat {float: none;}
But when I check it, it's not disabling float on mobile devices.
#media screen and (max-width: 860px) {
.leftfloat {float: none;}
}
#media screen and (max-width: 1020px) {
.leftfloat {float: none;} }
#media screen and (max-width: 767px) {
.leftfloat {float: none;}
}
#media screen and (max-width: 620px) {
.leftfloat {float: none;} }
#media screen and (max-width: 420px) {
.leftfloat {float: none;}
Your complete CSS looks like:
.leftfloat{
float:left;
padding-right:10px;
}
#media screen and (max-width: 860px) {
.leftfloat {
float: none;
}
}
#media screen and (max-width: 1020px) {
.leftfloat {
float: none;
}
}
#media screen and (max-width: 767px) {
.leftfloat {
float: none;
}
}
#media screen and (max-width: 620px) {
.leftfloat {
float: none;
}
}
#media screen and (max-width: 420px) {
.leftfloat {
float: none;
}
As it stands, mobile gets the float: left from your original class because the media queries are all max-width. To set float: none at "mobile" sizes you need to reverse everything, (eg)
.leftfloat {
float: none;
}
#media screen and (min-width: 420px) {
.leftfloat {
float: left;
}
}
You can set the property of the child in mobile to be inherit.
like this:
#media screen and (max-width: 420px) {
.leftfloat {
float: inherit;
}
Related
i need to know it is possible to combine multiple device css to one class.
Normally we use like this:
*CSS side*
#media (max-width: 991px) { .padding-991 {padding-left: 300px;} }
#media (max-width: 767px) { .padding-767 {padding-left: 100px;} }
#media (max-width: 479px) { .padding-479 {padding-left: 500px;} }
*HTML side*
<div class="padding-991 padding-767 padding-479"></div>
Here example that i've testing but not work.
*CSS side*
.padding {
#media (max-width: 991px) {padding-left: 300px;}
#media (max-width: 767px) {padding-left: 100px;}
#media (max-width: 479px) {padding-left: 50px;}
}
*HTML side*
<div class="padding"></div>
So i need to know it is possible to combine multiple device css to one class.
You should like that.
#media (max-width: 991px) {
.padding {
padding-left: 300px;
}
}
#media (max-width: 767px) {
.padding {
padding-left: 100px;
}
}
#media (max-width: 479px) {
.padding {
padding-left: 50px;
}
}
I have it working on phones but the desktop text shows on the tablet.
#media all and (min-width: 768px) {
.mobile {
display: none !important;
}
}
#media all and (max-width: 767px) {
.desktop {
display: none !important;
}
}
<h1 class="desktop">Desktop</h1>
<h1 class="mobile">Mobile</h1>
767px is practically the minimum width of the tablet.
You are probably testing on an Ipad. It is safest to set it to 1024px.
Because usually tablets are from 768 to 1024.
I suggest:
#header nav li.mobile {
display: none;
}
#media all and (max-width: 1023px) {
#header nav li.mobile {
display: inline-block;
}
}
#media all and (max-width: 1023px) {
#header nav li.desktop {
display: none;
}
}
I'm trying to show and hide some options on my navbar depending on the size of the screen. I've written my code in VisualStudio Code and it works fine, but when I put the custom CSS in the Customizing section of my theme (using Intentionally Blank) under the Additional CSS option, it doesn't.
I've tried a lot of solutions presented at similar questions on this site, but none of them are working.
The rest of my CSS code is working, so it shouldn't be a problem with finding the CSS file.
This is my code:
I'm removing tabs when the screen gets smaller and moving them into a dropdown menu called "more"
.custom {
font:'Arial';
}
.logo {
height: 100px;
width: auto;
margin: 7px;
}
.nav-link {
color: black;
}
/*Custom breakpoints navbar*/
/*Display none for the items in the navbar*/
#media only screen and (max-width: 940px) {
.nav-info {
display: none;
}
}
#media only screen and (max-width: 910px) {
.nav-recipes {
display: none;
}
}
#media only screen and (max-width: 815px) {
.nav-market {
display: none;
}
}
#media only screen and (max-width: 730px) {
.nav-gaming {
display: none;
}
}
/*Display of the "more" dropdown menu*/
#media only screen and (min-width: 940px) {
.nav-more {
display: none;
}
}
/*Display of content in the "more" dropdown menu*/
#media only screen and (min-width: 910px) {
.dd-recipes {
display: none;
}
}
#media only screen and (min-width: 815px) {
.dd-market {
display: none;
}
}
#media only screen and (min-width: 730px) {
.dd-gaming {
display: none;
}
}
/*Mobile display*/
#media only screen and (max-width: 730px) {
.col-title {
display: none;
}
}
#media only screen and (max-width: 730px) {
.logo {
height: 60px !important;
margin: 3px !important;
}
}
But again, I don't think there's anything wrong with the code, because it works just fine when I run it locally.
Does anyone know what to do in this situation? Could the problem be caused by with the theme I'm using?
Edit: Something else I've tried, but without succes, is putting the code that takes care of the responsiveness of the site in a different css file. How can I make the HTML code find the css file?
Edit 2: We got it to work by putting it inside the HTML file and removing the comments. We suspect that the problem was caused by the fact that the CSS code couldn't read the viewport. When we added it to the HTML file, that did mention the viewport in the meta tag in the head, it worked.
use WP wp_head action hook. using this hook you can simply add CSS in the header. check the below code. code goes in your active theme fucntions.php file.
function add_custom_css(){
?>
<style type="text/css">
.custom {
font:'Arial';
}
.logo {
height: 100px;
width: auto;
margin: 7px;
}
.nav-link {
color: black;
}
/*Custom breakpoints navbar*/
/*Display none for the items in the navbar*/
#media only screen and (max-width: 940px) {
.nav-info {
display: none;
}
}
#media only screen and (max-width: 910px) {
.nav-recipes {
display: none;
}
}
#media only screen and (max-width: 815px) {
.nav-market {
display: none;
}
}
#media only screen and (max-width: 730px) {
.nav-gaming {
display: none;
}
}
/*Display of the "more" dropdown menu*/
#media only screen and (min-width: 940px) {
.nav-more {
display: none;
}
}
/*Display of content in the "more" dropdown menu*/
#media only screen and (min-width: 910px) {
.dd-recipes {
display: none;
}
}
#media only screen and (min-width: 815px) {
.dd-market {
display: none;
}
}
#media only screen and (min-width: 730px) {
.dd-gaming {
display: none;
}
}
/*Mobile display*/
#media only screen and (max-width: 730px) {
.col-title {
display: none;
}
}
#media only screen and (max-width: 730px) {
.logo {
height: 60px !important;
margin: 3px !important;
}
}
</style>
<?php
}
add_action( 'wp_head', 'add_custom_css', 10, 1 );
I need to change the font-size based on the view port, for that I am using the below code; however, I feel it's a bit redundant and un-professional. I believe that it should be a better way to achieve the same result.
P.S. I am using Bootstrap 4
#media (min-width: 0px) and (max-width: 500px) {
.block {
font-size: 5.1em !important;
}
}
#media (min-width: 501px) and (max-width: 800px) {
.block {
font-size: 6.1em !important;
}
}
#media (min-width: 801px) and (max-width: 1100px) {
.block {
font-size: 4.8em !important;
}
}
#media (min-width: 1101px) and (max-width: 1300px) {
.block {
font-size: 5.5em !important;
}
}
#media (min-width: 1301px) {
.block {
font-size: 6em !important;
}
}
Above is my CSS for my question.
Is my CSS incorrect to display just one class per screen size?
I have been doing a million different variants of this (of course, this is an exaggeration) and I keep ending up with slightly different, but incorrect results.
This time I ended up with all 3 classes showing until the screen hit 480 pixels.
Then only my .desktop class showed.
/*Desktop Query*/
#media only screen and (min-width: 768px) {
.desktop {
display: none;
}
.mobile, .tablet {
display: block;
}
}
/*Mobile Query*/
#media only screen and (max-width:480px) {
.mobile {
display: none;
}
.desktop, .tablet {
display: block;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
.tablet {
display: none;
}
.mobile, .desktop {
display: block;
}
}
Here is my HTML:
<div class="mobile">
<main>
<h2> </h2>
<p> </p>
</main>
</div>
The problem with your code not displaying correctly is that you've literally inverted the display 100% incorrectly from what it should be:
/**Desktop Query*/
#media only screen and (min-width: 768px) {
.desktop {
display: block;
}
.mobile, .tablet {
display: none;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
.tablet {
display: block;
}
.mobile, .desktop {
display: none;
}
}
/*Mobile Query*/
#media only screen and (max-width:480px) {
.mobile {
display: block;
}
.desktop, .tablet {
display: none;
}
}
Note that I've also moved the tablet query to above the mobile query, as media queries will execute sequentially from top to bottom, which would explain why you were having strange results before.
Hope this helps! :)
I cleaned up your example so you can make more sense out of it. It works fine just by doing this:
/*Desktop Query*/
#media only screen and (min-width: 768px) {
body {
background: black;
}
}
/*Mobile Query*/
#media only screen and (max-width: 480px) {
body {
background-color: tomato;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
body {
background: pink;
}
}