I have a question about a project with WordPress and the Avada theme. There is a boxed mode option with a dropshadow customization. But when we use the website on mobile, it's not friendly. I would like to disable it!
I think I have to use media queries with CSS properties, but I don't know how...
You can find the project with this link: https://lr-architectes.com
I have already tried something like that in WordPress CSS customizer
#media (max-width: 800px) {
.body .html {
width: 100% !important;
}
}
#media (max-width: 800px) {
.layout-boxed-mode {
display: none !important;
}
}
No results
It looks like there's an error in your CSS syntax. You're missing some vital keywords in your code:
// the keywords `screen` and `and` were missing
#media screen and (max-width: 800px) {
.body .html {
width: 100% !important;
}
}
#media screen and (max-width: 800px) {
.layout-boxed-mode {
display: none !important;
}
}
To learn more about CSS media queries refer to W3Schools's docs on it here
Related
I'm working on my personal WordPress site, and when using media queries in the WordPress theme customizer, my site does not respond to the changes I've made to the background.
I am running the Divi theme, and used Chrome's inspect element to find which class I need to be changing.
#media only screen and (max-width: 768px) {
.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
background-size:100vw;
}
}
#media only screen and (min-width: 769) {
.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
}
}
I expect the background of each page to change to "echelon-enterprises.jpg" on desktop, and to "mobile-floor.jpg" depending on the screen size. What am I doing wrong here? Am I just targeting the wrong class? I have also tried the "et-main-area" class, still not luck.
You're missing px for the second declaration
#media only screen and (max-width: 768px) {
body.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/05/mobile-floor.jpg) repeat-y;
background-size:100vw;
}
}
#media only screen and (min-width: 769px) {
body.et_cover_background {
background: url(https://echelon.enterprises/wp-content/uploads/2019/03/echelon-enterprises.jpg) repeat-y;
}
}
I'm VERY new to coding.
I'd like to delete the black border (screenshot attached) on the mobile site of my website. I tried this CSS code that I found online, but had no luck.
#media
(max-width: 768px) {
{
#border: 0px;
}
}
http://www.viragocreative.com/see image
Thanks!
you have added media query and it's the proper way but you didn't select a class to style, I've checked your website and in your case it will be like this:
#media (max-width: 768px) {
.row.vc_custom_1494841069452 {
border: 0 !important;
}
}
I used !important because you are using it over all your site and it's not a good practice but if you want to do what you want, just add the css above
Add the class name or add element id and remove # before border property.
#media (max-width: 768px) {
.classname {
border: 0;
}
/* or */
#elementid {
border: 0;
}
}
I try for several days to change how are displayed the Previous and the Next navigation links for single posts on mobile devices in a Wordpress Twenty Sixteen child theme, more specifically, their font properties, but without success. I am able to format them for desktops, but not for mobile devices. I know about CSS media queries, but I am unable to find a solution in my situation. Can someone who knows this theme to suggest me any ideas?
This is what I tried the last time:
#media screen and (max-width: 75em) {
.post-navigation a .post-title {
color: #007acc;
font-size: 1rem;
line-height: 1.25;
}
}
This is my development site: dev.infopsi.md
This is a single post: http://dev.infopsi.md/2016/10/17/salut-lume.html
The problem was in the CSS file, which wasn't valid.
The #media screen and (max-width: 75em) block was inside another #media block (which is not valid CSS):
You can't do this:
#media screen and (min-width: 61.5625em) {
....
....
#media screen and (max-width: 75em) {
....
....
}
You must first close the first #media block:
#media screen and (min-width: 61.5625em) {
....
....
}
#media screen and (max-width: 75em) {
....
....
}
The easiest way to find such errors is to use a CSS validator:
https://jigsaw.w3.org/css-validator/
I've seen a lot of posts about nesting media queries in LESS so I dont want to repeat any of that or waste anyones time but my question is slightly different. I have a nested media query inside a .less file with this code:
#media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}
So that is on my login.less so my login page will be more responsive. I want to make another page responsive as well so in my aboutMe.less I also added the same code:
#media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}
but its not triggering at all. Can you not have two media queries of the same type in css? So I would need to make a .less file mediaqueries.less and only have one instance of this:
#media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}
and put all the sites code that I want that query to trigger in there, or is it possible to add the same query anywhere you want inside nested less files and im just doing something wrong?
Thanks!
CSS supports multiple identical media queries, if you like, but CSS doesnt support nesting.
LESS, on the other hand, does support a few methods for nesting media queries. You can read about it here: http://lesscss.org/features/#extend-feature-scoping-extend-inside-media
Example:
#media screen {
#media (min-width: 1023px) {
.selector {
color: blue;
}
}
}
Compiles to:
#media screen and (min-width: 1023px) {
.selector {
color: blue;
}
}
LESS also supports nesting media queries below selectors like this:
footer {
width: 100%;
#media screen and (min-width: 1023px) {
width: 768px;
}
}
Compiles to:
footer {
width: 100%;
}
#media screen and (min-width: 1023px) {
footer {
width: 768px;
}
}
If this doesnt answer your question, then please post the relevant part of your LESS file(s).
For media rules on less my recommendation is use Escaping.
Sample
#min768: (min-width: 768px);
.element {
#media #min768 {
font-size: 1.2rem;
}
}
I am currently creating a responsive web design using media queries. For mobile devices I want to remove my JS slider and replace it with something else. I have looked at .remove() and a few other things from the JQuery library, however these have to be implemented into the HTML and I cannot think of a work around from the css angle.
Do you need to remove them, or just hide them? If just hiding is okay, then you can combine media queries with display:none:
#mySlider{
display: block;
}
#media (max-width: 640px)
{
#mySlider
{
display: none;
}
}
You can hide an element and show another depending on screen size using media query from css , this is from one of my live projects (I use this to show/hide icon)
#media only screen and (max-width: 767px) and (min-width: 480px)
{
.icon-12{ display:none; } // 12 px
.icon-9{ display:inline-block; } // 9px
}
Not a 100% sure what you mean. But I created a class "no-mobile" that I add to elements that should not be shown on mobile devices. In the media query I then set no-mobile to display: none;.
#media screen and (max-width: 480px) {
.nomobile {
display:none;
}
}
You can also use jquery function addClass() and removeClass() or removeAttr() to fulfill your purpose.
Example:
$(window).resize(function(){
if(window.innerWidth < 500) {
$("#slider").removeAttr("style");
}
});
Or you can also use media query as follow :
#mySlider{
display: block;
}
#media (max-width: 500px)
{
#mySlider
{
display: none;
}
}