I want to make one part of the page responsive. But I cant get it working.
Only the media query with 1920px works.
this is my code:
#media screen and (max-width: 1440px) and (min-width: 1350px) {
#designer-info {
margin-right: -129px;
}
}
#media screen and (max-width: 1920px) and (min-width: 1700px) {
#designer-info{
margin-right:-8%;
}
}
#media screen and (max-width: 2880px) and (min-width: 1920px) {
#designer-info {
margin-right: -430px;
}
}
Could somebody help me. i cant find the solution.
Not working because you have in one query min-width:1920px and in another query max-width:1920px, so it will override.
don't need to use both max-width and min-width
either use mobile first approach using min-width
#media (min-width: 1350px) {
#designer-info {
margin-right: -129px;
}
}
#media (min-width: 1700px) {
#designer-info {
margin-right: -8%;
}
}
#media (min-width: 1920px) {
#designer-info {
margin-right: -430px;
}
}
or non-mobile approach using max-width
#media (max-width: 2880px) {
#designer-info {
margin-right: -430px;
}
#media (max-width: 1920px) {
#designer-info {
margin-right: -8%;
}
}
#media (max-width: 1440px) {
#designer-info {
margin-right: -129px;
}
}
}
Need to add <meta name="viewport" content="width=device-width, initial-scale=1"> in HTML head section.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
<body>
...
</body>
</html>
maybe override there (max-width: 1920px) and (min-width: 1920px)
You should to use the different width in each media query.
Hope this can help you
Ex.
(max-width: 1920px) and (min-width: 1700px)
and
(max-width: 1921px) and (min-width: 2880px)
Related
I am trying media queries, but they won't work on 768px and 576px. I tried the minimum width but it also does not work.
.changing-color {
background-color: powderblue;
width: 100vw;
height: 30vh;
font-size: 3vw;
}
#media screen and (max-width: 1400px) {
.changing-color {
background-color: chartreuse;
}
}
#media screen and (max-width: 1200px) {
.changing-color {
background-color: blueviolet;
}
}
#media screen and (max-width: 992px) {
.changing-color {
background-color: brown;
}
}
#media screen and (max-width: 768px) {
.changing-color {
background-color: darkorange;
}
}
#media screen and (max-width: 576px) {
.changing-color {
background-color: darkkhaki;
}
}
<div class="changing-color"></div>
Your CSS is correct, it works in this pen. Maybe you are not resizing your screen? Because that is exactly what these media-queries are for.
This snippet below is limited in width, so it will show probably darkorange depending on how you are viewing this page. On mobile it might even show darkkhaki.
.changing-color {
background-color:powderblue;
width: 100vw;
height: 30vh;
font-size: 3vw;
}
#media screen and (max-width: 1400px){
.changing-color {
background-color:chartreuse;
}
}
#media screen and (max-width: 1200px){
.changing-color {
background-color:blueviolet;
}
}
#media screen and (max-width: 992px){
.changing-color {
background-color:brown;
}
}
#media screen and (max-width: 768px){
.changing-color {
background-color:darkorange;
}
}
#media screen and (max-width: 576px){
.changing-color {
background-color:darkkhaki;
}
}
<div class="thing changing-color"></div>
Have you added a viewport meta tag like this ?
<meta name="viewport" content="width=device-width,initial-scale=1">
This is needed because by default, most mobile browsers lie about their viewport width.
Reference Beginner's Guide to Media Queries
I am running a small website on Joomla and cannot get the responsiveness to work. I am running media queries for the screen sizes and making adjustments as needed, but cannot get them to adjust for anything under 760px wide.
I've checked all four of my media queries and cannot find a solution. I'm sure it's something simple, but I cannot find it. I do
/* Note: Design for a width of 768px */
#media (min-width: 768px) and (max-width: 959px) {
.main, #jf-footer .main-inner1 {
width: 768px;
}}
/* Note: Design for a width of 480px */
#media (min-width: 480px) and (max-width: 767px) {
.main, #jf-footer .main-inner1 {
width: 444px;
}}
/* Note: Design for a width of 320px */
#media (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}}
I expect the main DIV to scale for 768px, 480px and 320px, but cannot get it to scale properly.
The website is located at:
https://crafted-development.com
My Css is located at:
https://www.crafted-development.com/templates/jf_calla-exteriors/css/template.css
You need to close the media tag also at the end with "}"
Also, instead of media, try adding "#media only screen and"
Example::
/* Note: Design for a width of 320px */
#media only screen and (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}
}
Also, the meta tag is necessary
<meta name="viewport" content="width=device-width, initial-scale=1">
Use this css
#media only screen and (min-device-width: 768px) and (max-device-width: 959px) {
.main, #jf-footer .main-inner1 {
width: 768px !important;
}
}
#media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
.main, #jf-footer .main-inner1 {
width: 444px !important;
}
}
#media only screen and (min-device-width: 320px) and (max-device-width: 479px)
{
.main, #jf-footer .main-inner1 {
width: 316px !important;
}
}
This turned out to be the solution: Thank you guys!
/* Note: Design for a width of 320px */
#media only screen and (min-width: 320px) and (max-width: 767px){
.main, #jf-footer .main-inner1 {
width: 316px;
}
}
I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first #media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost
Your help is greatly appreciated
Thanks
#media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
#media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
#media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
#media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE
}
First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.
Here is an example.
/* Large desktop */
#media only screen and (min-width :75.000em) {
.test {
display: none;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :61.250em) and (max-width:74.938em) {
.test {
display: block;
color: #FF0;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :48.000em) and (max-width:61.188em) {
.test {
display: none;
}
}
/* Landscape phone to portrait tablet */
#media only screen and (min-width :30.063em) and ( max-width :47.938em) {
.test {
display: none;
}
}
/* portrait phones and down */
#media only screen and (max-width :30.000em) {
.test {
display: block;
color: #FF0;
}
}
<meta name="viewport" content="width=device-width initial-scale=1" />
Include above code into html to run media query.
You need to set your first one to say "anything smaller than (max-width: 829px), do this"
For EG:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
#media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}
See it in effect at this Plunker - I added the bg class to the body so you can see the background change color when you change the frame width.
You can simplify your queries too by saying:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px){
.bg {background-color:red;}
}
#media (min-width: 1026px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) {
.bg {background-color:yellow;}
}
I have set some media queries, but some work and some dont. I really dont know what is wrong, because i used the same media query code for another project and that worked as usual. It works from 768px and on but not on smaller screens. I am using bootstrap and angular.
#media only screen and (min-width : 320px) and (max-width : 480px) {
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 481px){
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 768px) {
.accordion-ticket {
margin-left: 10px;
}
}
Am I missing something? Meta tag is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Offhand I'd say you were missing a max-width statement from the middle media query but it's not entirely clear what the issue is.
JSfiddle Demo
.accordion-ticket {
height: 25px;
background: red;
}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.accordion-ticket {
background: blue;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.accordion-ticket {
background: green;
}
}
#media (min-width: 768px) {
.accordion-ticket {
background: orange;
}
}
<div class="accordion-ticket"></div>
Looks like your queries are upside down for a start you should have them from the widest to shortest top to bottom.
I've read several of the questions on here as well as Google looking for stuff and I found a lot bu tfor some reason I can't get mine to work for iPads. I was able to get it working for iPhones but the iPad is still displaying my bg img. These are all the queries I've tried and came up empty handed.
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
body.custom-background {
background-color: #FFFFFF;
background-image: none;
}
}
#media only screen and (min-width: 481px) and (max-width: 1024px) {
body.custom-background {
background-color: #FFFFFF;
background-image: none;
}
}
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body.custom-background {
background-color: #FFFFFF;
background-image: none;
}
}
#media handheld and (max-device-width: 480px) {
body.custom-background {
background-color: #FFFFFF;
background-image: none;
}
}
May you have Meta in you html head. like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
with that media query
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body.custom-background {
background-color: #FFFFFF;
background-image: none;
}
}