I am using the CSS #media property to hide a div when the page is 900px or less in width. It works the first because when I resize the page to less than 901px the div disappears, but when I return the page to its normal size, the div remains hidden. Here is the code:
<style>
.mydiv {
display:block
}
#media (max-width: 900px) {
.mydiv {
display: none;
}
}
</style>
What do I have to do to make the div reappear after the size returns to normal?
Try:
<style>
.mydiv {
display: block;
}
#media (max-width: 900px) {
.mydiv {
display: none;
}
}
</style>
Maybe you have a style interfering somewhere, you may want to look at the inspector to see which styles are being applied.
(open the snippet in expanded mode to test it)
.hide-me {
width: 200px;
height: 50px;
background: green; /* visible */
}
/* This has to come last */
#media only screen and (max-width: 900px) {
.hide-me {
background: red; /* hidden */
}
}
<div class="hide-me"></div>
I actually fixed it by using visibility: hidden instead of using display: none. I don't know if this is a consistent fix, but it worked for me
Related
I was following a tutorial about media queries. When I open the HTML in Chrome/Firefox, I get a blank page, and nothing displays. When I inspect the page though, the code displays normally and I can see how the media queries work. I tried adjusting the min-width and max-width of the media queries but I still get a blank page in any browser I use. I have posted the original HTML below from the tutorial.
<!DOCTYPE html>
<html>
<head>
<title>Beginners CSS - Chapter 8</title>
<style type="text/css">
* {
margin: 0px;
}
main {
margin: 10px auto;
width: 600px;
padding: 30px;
margin-top: 0px;
background-color: olive;
display: block;
}
#media screen and (max-width: 350px) {
main {
background-color: #88a5e0;
}
}
#media screen and (min-width: 600px) {
main {
background-color: red;
}
}
#media screen and (min-width: 800px) {
main {
background-image: url('images/Reeds-in-Wind-Cinemagraph.gif');
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 400px;
}
}
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
</style>
</head>
<body>
<main>
<h1>Media Queries</h1>
<p>Media allows you to make your pages to change to fit any device.</p>
</main>
</body>
</html>
The screen width changes when the developer tool is opened on the right/left dock. So, the elements that you saw perhaps are from the min-width 800px media query.
The page when the minimum width is 1000 pixels is not "blank page and nothing displays". You can read from the code below, you're setting the background-color to white, hiding the h1 & p and removing the background-image when the min-width: 1000px.
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #fff;
}
h1,
p {
display: none;
}
}
The page is not blank, according to your code for screens with width more than 1000px you set this styles:
#media screen and (min-width: 1000px) {
main {
background-image: none;
background-color: #FFF;
}
h1, p {display: none;}
}
so the h1 and p1 element will not be displayed and the background will be white,
if you resize the window other media queries happen.
Also by Opening your developer tools you are resizing your window.
How do I setup HTML/CSS to have my DIV follow the screen size for width, but stop expanding once it fits the contents (it should scroll left/right when the div cannot fully contain the contents).
Pseudo-Code:
HTML:
<div class="image-container">
<img width="1000">
</div>
CSS:
.image-container {
/* ??? */
display: inline-block; /* ??? */
overflow: auto;
}
EDIT: Per Evadore's answer, I was able to come up with the following CSS.
.image-container {
display: inline-block;
overflow: auto;
}
/* optimize these px dimensions, 900 worked for my application */
#media (max-width: 900px) {
.image-container {
max-width: 710px;
}
}
/* redundant, I plan to tweak this range later */
#media (min-width: 901px) and (max-width: 1575px) {
.image-container {
max-width: 710px;
}
}
#media (min-width: 1576px) {
.image-container {
max-width: 1385px;
}
}
The following reference also helped: w3schools
Use CSS Media queries to setup for various screen sizes.
view source code of this page to see how media queries were used.
for this set the parent div width to fit-content and max-width to 100%. now the parent div will remain between the width of the content and the with of the screen if the screen size is not enough. And lastly for scrolling inside the parent div on the small screen devices put overflow:scroll.
Here is the Codepen demo
.parent {
background-color: green;
width: fit-content;
max-width: 100%;
overflow: scroll;
}
.child {
padding: 30px;
width: 700px;
background-color: red;
color: #fff;
}
<div class="parent">
<div class="child">
test string
</div>
</div>
ps: I've added bg colors just for reference purposes, to show whether the parent component is expanding or not.
I have a CSS responsive main menu which I created using code from a couple of different examples. Thus far I have discovered one major flaw. In responsive mode dropdown menu items that extend beyond the normal height of the menu disappear. You can see a demo at:
Main Menu Demo
It seems to be related to overflow. I tried various versions of overflow:hidden and overflow:visible with small/large device sizes with no success. Maybe that's not really the problem, just what I see. Here is the code from that part of the CSS:
/* overflow hack somewhere around here - add height to toplevel to get menu to display all dropdown in mobile */
.header ul.toplevel {
overflow: hidden;
}
#media (min-width: 768px) {
.header ul.toplevel {
overflow: visible;
}
}
#media (max-width: 767px) {
.header ul.toplevel {
height: 360px; /* the hack */
}
.header ul.dropdown {
overflow: visible;
}
}
#media (min-width: 768px) {
.header ul {
overflow: visible;
}
}
#media (max-width: 767px) {
.dropdown ul {
overflow: visible;
}
}
/* end overflow hack area */
Viewing the source you can see both CSS and plain HTML. There is no javascript. The tmp fix of setting a height to the .header ul.toplevel on small devices is awkward at best. Suggestions?
Try add this
ul.dropdown .dropdown-content {
width: 100%;
z-index: 1000;
position: relative;
}
This question already has answers here:
Why does media query only work when placed last in my CSS?
(2 answers)
Closed 6 years ago.
I had a quiz in a html/css class I'm taking asking me to use media queries to reorganize some divs based on screen size. The code they supplied that I was supposed to add onto was this:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
#media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
There was a lot more than that but that is the relevant part. I came up with this:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
#media screen and (min-width: 450px) {
.light_blue, .green {
width: 50%;
}
}
#media screen and (min-width: 550px) {
.red {
width: 33.3%;
}
.orange {
width: 66.6%;
}
}
#media screen and (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
#media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
But it did literally nothing. The page was completely unchanged. I eventually gave up and looked at the answer, they had written exactly the same the CSS that I had, only in a different order:
<style type="text/css">
/*
These are the responsive styles. Throw some breakpoints in here!
*/
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 100%;
}
#media screen and (min-width: 450px) {
.light_blue, .green {
width: 50%;
}
}
#media screen and (min-width: 550px) {
.red {
width: 33.3%;
}
.orange {
width: 66.6%;
}
}
#media screen and (min-width: 800px) {
.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}
#media screen and (max-width: 400px) {
.dark_blue {
color: blue;
}
}
</style>
So my question is, how does order get applied here and why didn't my code do anything at all?
CSS stands for Cascading Style Sheets, so there rules will be interpreted cascading down, so if you have
.blue { color: blue; }
And then later on down the same CSS file, you put
.blue { color: pink; }
It will overwrite the color of .blue to pink
With media queries you want to add your default styling first and then add your media queries, because it will detect media queries first and then just use those rules instead of your default styling.
Because the browser will be able to detect (for example) your devices min-width is 800px, it'll pick up those styles and not bother to overwrite them when the file gets interpreted further down in your default styling
Hard to explain. Hope that sort of cleared things up
Currently I manage the CSS code differently based on screen size using and it works fine:
#media only screen and (max-width: 40em) {
my code
}
Now, what I'm trying to achieve is to have a piece of html code placed differently based on the screen resolution.
For instance my div id="news_box" would be placed in my header wrapper on desktop. Whereas on mobile phones, div id="news_box" would be placed in the footer wrapper.
How could I achieve that?
Many thanks,
As far as I know, there is no way to manipulate the DOM using CSS in that way, but you could use a JavaScript hack:
window.addEventListener('load', function(){
var width = this.innerWidth;
if(width < 400) {
document.getElementById('footer-id').appendChild(document.getElementById('news_box'));
}
});
Or maybe assign a class to it and have the element appear in both the header and footer (although, you would want to change the ID):
#footer-id .news_box {
display: none;
}
#header-id .news_box {
display: block;
}
#media only screen and (max-width: 40em) {
#footer-id .news_box {
display: block;
}
#header-id .news_box {
display: none;
}
}
With this you go through the diffrent resolutions. You have to change the values for your "news_box" for every different one.
e.g. For desktops you have a float:left box which will be not present in the css part for your mobiles.
example:
/* Tablets */
#media only screen and (min-width: 760px) {
#news_box { max-width: 760px }
…
}
/* midle screens */
#media only screen and (min-width: 980px) {
#news_box { max-width: 980px; float:left; margin: 0 auto; }
}
/* big screens */
#media only screen and (min-width: 1280px) {
#news_box { max-width: 1280px; float:left; margin: 0 auto; }
…
}