I have a stylesheet and for some reason my media queries are not being detected. When I resize my browser and Inspect Element, I'm still seeing the 1060px .container.
here's the part of the stylesheet
.container {
margin: 0 auto;
width: 1060px;
}
.container .section {
margin-top:40px;
width:320px;
margin-left:20px;
float:left;
height:480px;
position:relative;
}
/* Smartphones (portrait and landscape) */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.container {
padding-left:2%;
margin: 0 auto;
width: 96%;
}
.container .section {
width:96%;
display:block;
position:relative;
}
}
You define only smartphone media query. Outside this media query CSS, you must define CSS by this way for larger size.
/* 1080 HD */
#media screen and (max-width: 2048px) {
.container {
margin: 0 auto;
width: 1060px;
}
.container .section {
margin-top:40px;
width:320px;
margin-left:20px;
float:left;
height:480px;
position:relative;
}
}
/* Smartphones (portrait and landscape) */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.container {
padding-left:2%;
margin: 0 auto;
width: 96%;
}
.container .section {
width:96%;
display:block;
position:relative;
}
}
And add following meta tag in element of webpage document.
<meta name="viewport" content="width=device-width, initial-scale=1">
above line point to a media query viewport, so its not find outside defined CSS.
Related
How can I increase the percentage of margins as the viewport width also increase? For example if the screen is 1600px wide, the margins are set to 1% and when the screen is 2100px and above the margins are 10%.
How do I set this in CSS?
Here is a working example of what you are looking for: https://codepen.io/colinah/pen/VwQombR
The Idea is to use a media query to tell if the device is larger than 1600px then set the margin to 10vw
body{
margin: 1vw
}
#media(min-width:1600px){
body {
margin: 10vw
}
}
.wrapper{
border: 1 px solid black;
background: blue;
}
.my-list {
border: 1 px solid;
}
.my-list {
background: red;
}
/* On screens that are 1600px wide or more, make margin 1%; */
#media screen and (max-width: 1600px) {
.my-list {
margin: 1%;
}
}
/* On screens that are 1600px wide or more, make margin 1%; */
#media screen and (min-width: 1600px) and (max-width: 1700px){
.my-list {
margin: 1%;
}
}
/* On screens that are 1700px wide or more, make margin 3%; */
#media screen and (min-width: 1700px) and (max-width: 1800px){
.my-list {
margin: 3%;
}
}
/* On screens that are 1800px wide or more, make margin 4%; */
#media screen and (min-width: 1800px) and (max-width: 1900px){
.my-list {
margin: 4%;
}
}
/* On screens that are 1900px wide or more, make margin 6%; */
#media screen and (min-width: 1900px) and (max-width: 2000px){
.my-list {
margin: 6%;
}
}
/* On screens that are 2000px wide or more, make margin 8%; */
#media screen and (min-width: 2000px) and (max-width: 2100px){
.my-list {
margin: 8%;
}
}
/* On screens that are 2100px wide or more, make margin:10%; */
#media screen and (min-width: 2100px) {
.my-list {
margin: 10%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="wrapper">
<div class="my-list">
test message
</div>
</div>
</body>
</html>
I have an padding for body (desktop) but i need to change it to fit at mobiles
this is the body css:
.column{
float:left;
width:50%;
max-height:376px;
padding-left:10%;
}
and this is the part for mobile at the same css file:
#media all and (max-width : 480px) {
.column{
padding-left:-5%;
}
}
why this didn't change anything?
You can change the padding to 0px on mobile and then add a negative margin if you are looking to move the .column element to the left.
#media all and (max-width : 480px) {
.column{
margin-left: -5%;
padding-left:0;
}
}
I'm trying to make a background image fill up (in height) when going mobile. When I make the browser smaller, it doesn't seem like my media queries are kicking in.
Here's what my css looks like:
#main {
background-image:url(../images/cc.jpg);
height:650px; background-size:cover;
background-position:0 -210px;
background-repeat:no-repeat;
}
#main .row {
margin-top:200px;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#footer {
font-size:10px;
}
#main {
background-image:url(../images/cc.jpg);
height:100%;
background-size:cover;
background-repeat:no-repeat;
}
#id{ margin-top:90px; }
#main .row {
margin-top:100px;
}
}
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
#footer {
font-size:10px;
}
#main {
background-image:url(../images/cc.jpg);
height:100%;
background-size:cover;
background-repeat:no-repeat;
}
#id{ margin-top:90px; }
#main .row {
margin-top:100px;
}
}
Here's the URL if you want to see what the page looks like:
http://www.gulflifehomes.com/
Change to background-position: center; and that should do the trick. Also, you should try and one-line your code when possible background: url(../images/cc.jpg) no-repeat center center fixed;.
If you want to test media queries on desktop, you should use min-width or max-width instead of min-device-width or max-device-width.
So do this:
#media only screen and (min-width : 320px) and (max-width : 480px)
min-device and max-device refers to the ACTUAL resolution of your screen (ie: 1280x800) instead of the size of your browser. This is why your media queries isn't kicking in when resizing browser and testing on your machine.
Remove the background-position rule or reset it to 0 for mobile if you still want it in place for desktop.
You have a lot of repetitive code there. You could just do this:
#main {
background-image:url(../images/cc.jpg);
height:650px; background-size:cover;
background-position:0 -210px;
background-repeat:no-repeat;
}
#main .row { margin-top:200px; }
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#footer { font-size:10px; }
#main { background-position: 0; }
#id{ margin-top:90px; }
#main .row { margin-top:100px; }
}
I'm creating a responsive page using CSS Media Queries. I can see in Chrome's developer tools that the media queries are working, however, they are not overriding my default styles. For example, take these styles:
#hero .text {
margin: 150px;
}
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
In my browser, if I resize to 1024px wide, I can see that the all the above styles are being requested BUT the default style (with margin 150px) is what is finally used.
ANy idea what I'm doing wrong?
change this
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
to
#media screen and (max-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and
#media screen and (min-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and this one below,
.text { /*removed #test */
margin: 150px;
}
My CSS isn't working on mobile portrait.
I want the main top menu to appear beneath the logo.
Here is my css at the mo:
#media screen and (max-width: 480px) {
#wrapper {
width:100%;
}
#logo {
margin-left: 100px;
}
#menu {
width:100%;
display:inline-block;
}
}
Hi now define your wraper width 100% into 480px as like this
#media screen and (max-width: 480px) {
#wrapper { width:480px; }
#logo {
margin-left: 100px;
}
#menu { width:100%;display:inline-block; }
}