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.
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'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
I have a requirement for a responsive iframe. I have found many solutions for embeding videos (and Bootstrap even has classes for this specific case) but I'm embeding a form which itself is responsive (This is a Global Payments / Realex Paymenmts HPP card paymemt form if anyone know it).
So, the aspect ration of the form changes based on its size and also what the user does - for example it gets longer to display error messages.
Also, as can be seen the initial content is the iframe is just "Please wait..." and the thoird party form is loaded via javascript.
I have modified the video embeding method by adding progressive media queries to increase padding as the device gets smaller and thus the form longer, to avoid scroll bars. It seems to work well, but there must be a more efficient/simple/elegant solution?
HTML
<div class='hpp_iframe_wrapper'>
<iframe class='hpp_iframe' id='realex_hpp_iframe' name='realex_hpp_iframe' srcdoc='<p>Please wait ...</p>'></iframe>
</div>
CSS
.hpp_iframe_wrapper {
position: relative;
overflow: hidden;
padding-top: 80%;
}
.hpp_iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
#media (max-width: 1000px) {
.hpp_iframe_wrapper {
padding-top: 90%;
}
}
#media (max-width: 900px) {
.hpp_iframe_wrapper {
padding-top: 100%;
}
}
#media (max-width: 800px) {
.hpp_iframe_wrapper {
padding-top: 130%;
}
}
#media (max-width: 700px) {
.hpp_iframe_wrapper {
padding-top: 145%;
}
}
#media (max-width: 600px) {
.hpp_iframe_wrapper {
padding-top: 160%;
}
}
#media (max-width: 500px) {
.hpp_iframe_wrapper {
padding-top: 185%;
}
}
#media (max-width: 450px) {
.hpp_iframe_wrapper {
padding-top: 200%;
}
}
#media (max-width: 400px) {
.hpp_iframe_wrapper {
padding-top: 220%;
}
}
#media (max-width: 360px) {
.hpp_iframe_wrapper {
padding-top: 240%;
}
}
#media (max-width: 340px) {
.hpp_iframe_wrapper {
padding-top: 260%;
}
}
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;
}
}