I'm new to media queries, and I've watched a few tutorials on the best practices, but it seems i can't get mine to work..
I created a simple text div to make sure it even works, and I'm trying to have the background-color of the div change to blue once the width of the browser is smaller than 500px.
Does anybody know what I'm missing?
#text_box {
height: 100px;
width: 100px;
background-color: red;
}
#media screen and (max-width: 500px) {
#test_box {
height: 100px;
width: 100px;
background-color: blue;
}
}
<div id="text_box">Test</div>
Here is my demo
you have a typo inside your media query in your id,it is not test_box, but text_box.
plus you don't need to repeat properties already set before, if they have the same value.
#text_box {
height: 100px;
width: 100px;
background-color: red;
}
#media screen and (max-width: 500px) {
#text_box {
background-color: blue;
}
}
<div id="text_box">Test</div>
Related
I realize this is a duplicate, but the solutions I have tried do not work. For some reason, after adding the viewport meta tag, my media queries do not work on mobile. Does anyone know why?
Edit: The reason why was because my screen wasn't zoomed in at 100% width.
Here is the code:
#media only screen and (max-width: 1260px) {
.container {
margin-top: 300px;
}
h2 {
font-size: 3vw;
width: 800px;
}
p {
font-size: 2.5vw;
width: 800px;
}
}
#media only screen and (max-width: 550px) {
h2 {
width: 330px;
font-size: 5vw
}
p {
font-size: 4vw;
width: 330px;
}
}
Thanks.
I posted this a few months ago and now I realized it was because my screen was zoomed in. If you have this problem, make sure your window is set to 100% zoom.
I have this code . When i resize the browser to min-width: 480px it doesn't change the background color to blue and width to 100px
this is my code so far:
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
.boxcontainer{
width: 1300px;
background-color: green;
height: 200px;
}
<div class="boxcontainer">
</div>
Thank you
Switch the order of the CSS rule, Change your CSS into
.boxcontainer {
width: 1300px;
background-color: green;
height: 200px;
}
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
As in this JSFiddle example. the background is blue as long as the width is not less than 480px, otherwise it turns green.
IF by any chance you meant to do the opposite, because .boxcontainer{width:1300px} makes me think you want that , then just change the media query break point to #media screen and (max-width: 480px) instead of #media screen and (min-width: 480px).
You can see the second option in this JSFiddle
Okay, I've got it resizing nicely for devices using a media query. Now I need to reproduce this on a browser resize. Is it possible using only CSS? I'm trying to avoid multiple named divs for scalability (i.e. add another change the min-width etc and it'll still work)
Yes, this may well have been asked before (I really have hunted), but there's just so many ways of framing the question...please indulge me .
The media query with viewport turns the divs into columns of a specific size.
But how on earth do I do this during a browser resize?
If you view this result on device via Chrome inspect etc my point will be abundantly clear.
Thanks all!
#Page {
margin: 0 auto 20px;
width: 98%;
/*1000px*/
background-color: lightgray;
}
#content {
margin: 0 auto 10%;
width: 96%;
background-color: green;
max-width: 1100px;
}
.col_content {
float: left;
margin: auto 1%;
width: 30%;
background-color: pink;
min-width: 225px;
}
#media only screen and (max-device-width: 768px) {
#Page {
background-color: white;
}
#content {
max-width: 400px;
background-color: green;
}
.col_content {
float: none;
margin: 1%;
/*5px*/
width: 100%;
background-color: pink;
}
}
<div id="content">
<!--Content-->
<div class="col_content">
1
</div>
<!--end col_content-->
<div class="col_content">
2
</div>
<!--end col_content-->
<div class="col_content">
3
</div>
<!--end col_content-->
</div>
<!--end content-->
Try changing:
#media only screen and (max-device-width: 768px) {
to
#media screen and (max-width: 768px) {
I use the above on my website and it works on browser resizes and on devices.
Getting what appears to be rogue margin off of a google map element. The gallery should be on the right but this margin is stopping that. Can't seem to find what's producing this margin. Even the element inspector 'Metrics'? tool shows there is no margin, but the element highlighting on the screen shows a margin that pushes to the right edge of the page
My CSS for the element.
.gallery-map {
height: 320px;
}
#media (min-width: 415px) {
.gallery-map {
height: 416px;
}
}
#media (min-width: 780px) {
.gallery-map {
height: 500px;
width: 500px;
}
}
Explicitly set margin and margin-right to 0, tried to contain it in a wrapping div (that removed the rogue margin from the map element and put it on the new wrapping element) and several other things.
A link to the branch I'm working on for this
The fix was setting a couple of inline-blocks
.gallery-map {
height: 320px;
display: inline-block;
#media (min-width: 415px) {
height: 416px;
}
#media (min-width: 780px) {
height: 500px;
width: 64.5%;
}
}
Also to get that gallery to come along side I needed to add the inline-block specifically to the media query
.gallery {
height: 318px;
overflow-y: scroll;
overflow-x: hidden;
#media (min-width: 780px) {
width: 35%;
display: inline-block;
}
}
I have a simple setup like this :
<div id="div0">
<div id="div1">Content</div>
<div id="div2">Content</div>
</div>
The two middle divs(1,2) have width:100% and max-width:390px plus floatLeft. When resizing the browser div2 will jump a row down and when getting less then width 390 thay will both start to resize.
What I need is to resize to a min-width first and then jump down to the second line.
How do I do that?
Edit1 : example : http://jsfiddle.net/dwDZx/
Here's a responsive example of what you're asking about. I changed some widths to make it easier to follow the example and see where the numbers come from. http://jsfiddle.net/dwDZx/4/
I change background colors in the different responsive layouts to show you which section is active at which point in resizing the browser.
The only change I made to the markup was to create a "content" div inside div1 and div2. This allowed me to set a border. If I set width of div1 and div2 to 50% AND set a border, then the total width would be 50%+2px (1px left + 1px right) which would cause the floats to wrap. By putting the border on the content div, it puts the borders inside the 50% instead of outside.
CSS:
* { margin: 0; padding: 0; }
.content { border: 1px solid black; }
#div1, #div2
{
float:left;
}
#media (min-width: 801px)
{
#div1, #div2
{
width: 400px;
background: green;
}
}
#media (min-width: 400px) and (max-width: 800px)
{
#div1, #div2
{
width: 49.9%;
background: red;
}
}
#media (max-width: 399px)
{
#div1, #div2
{
float: none;
width: 100%;
}
}
EDIT: I thought about it and simplified things a bit. See http://jsfiddle.net/dwDZx/5/ The CSS changes as follows: set a max-width on the parent div to be the max width of div1+div2. Then you only need one media state: for when it's < 400px and should be on one line.
CSS:
* { margin: 0; padding: 0; }
.content { border: 1px solid black; }
#container { max-width: 800px; }
#div1, #div2
{
float:left;
width: 50%;
background: green;
}
#media (min-width: 400px) and (max-width: 800px)
{
#div1, #div2
{
background: red;
}
}
#media (max-width: 399px)
{
#div1, #div2
{
float: none;
width: 100%;
background: blue;
}
}