I'm attempting to make the site a little mobile friendly. I have an image (splitter-vertical.jpg) between the menu/nav & main content. I'm attempting to use:
#media (max-width: 800px) {
img.splitter-off {
display: none;
}
}
.left-img-col {
width: 8%;
float: left;
display: table-cell;
vertical-align: top;
}
<div class="left-img-col">
<img class="splitter-off" src="https://tlod.net/include/img/splitter-vertical.jpg">
</div>
To remove the image on smaller screens.
But no matter the amount (500px, 300px, 900px) the image doesn't go away. I've also tried min-width: and couldn't get it to work. FireFox, Chrome, & Edge still display it no matter how big the browser window is. Even cleared cookies/cache and it still remains. View Live Site Here
In your style.css file , you have this code :
#media (max-width: 800px) {
img.splitter-off {
display: none;
}
}
img.splitter-off {
display: block;
}
change this code to :
img.splitter-off {
display: block;
}
#media (max-width: 800px) {
img.splitter-off {
display: none;
}
}
You shloud use media queries after main css.
Well this will work on safari but not any other browser.
The problem is that you missed out the media-type.
You wrote #media (max-width: 800px)
The CSS should be as follows:
#media screen and (max-width: 800px) {
img.splitter-off {
display: none;
}
}
.left-img-col {
width: 8%;
float: left;
display: table-cell;
vertical-align: top;
}
Check this snippet out:
#media screen and (max-width: 800px) {
img.splitter-off {
display: none;
}
}
.left-img-col {
width: 8%;
float: left;
display: table-cell;
vertical-align: top;
}
<div class="left-img-col">
<img class="splitter-off" src="https://tlod.net/include/img/splitter-vertical.jpg">
</div>
Hope I could help
Related
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 want to create div in html with images and texx, but It should appears only on mobile version, how i can make this ?
Here is some code.
/*-- Mobile Design---- */
#media (min-width: 320px) and (max-width: 767px) {
/* put your css styles in here */
html,
body {
margin-top: 0;
margin-bottom: 0;
}
a.navbar-brand img {
padding: 0;
display: flex;
margin-left: 10px;
margin-right: auto;
width: 95%;
max-width: 200px;
}
.header {
height: 15%;
}
.navbar-toggler i {
font-size: 22px;
margin-right: 10px;
}
Hide the element by default and only show it when it fits your contraints. For example:
.yourElement {
display: none;
}
#media (min-width: 320px) and (max-width: 767px) {
.yourElement {
display: block;
}
}
If I set the browser width to 1024px the following bootstrap container rule is being applied:
#media (min-width: 768px) {
.container {
width: 750px;
}
}
If I extend the browser width to 1092px then the following bootstrap container rule is being applied:
#media (min-width: 992px) {
.container {
width: 970px;
}
}
There are no other CSS rules applied to the container, just the standard bootstrap rules:
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
Can anyone explain to me why a browser width of 1024px isn't getting the min-width: 992px rules applied to it?
I think you forget open close bracket { }
#media (min-width: 768px) {
.container {
width: 750px;
background: yellow;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
background: red;
}
}
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;
}
}
When using brackets to code my website, the #media worked and would make divs appear and disappear to support mobile screens. But after uploading to my hosting site, it does not work and all the elements are showing at once. How can I fix this? The relevant CSS code is below.
CSS:
#media (max-width : 720px) {
.disappear {
display: none;
}
#menuposition {
margin-left: auto;
margin-right: auto;
}
.galleryitem {
width: 100%
}
.containergallery {
max-width: 250px;
padding-top: 0%;
}
}
#media (min-width : 721px) {
.reappear {
display: none;
}
#menuposition {
right: 0px;
position: absolute;
}
}
#media (max-width : 960px) {
.galleryitem {
width:100%
}
.containergallery {
max-width: 300px;
padding-top: 10px;
}
}
That page you linked to doesn't have that CSS in the source anywhere and none of the linked files have it either.
Link the CSS to the page or place it in an inline-style element.