I am using media queries to change my website look at different sizes...
this is my HTML code
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet" media="screen and (max-width: 600px)"
href="styles/style.css"/>
AND my CSS code
#media screen and (max-widht: 650px) {
.projects-grid{
float: none;
width: 100%;
grid-template-columns: 100%;
}
}
#media screen and (max-width: 650px) {
.projects-grid{
float: none;
width: 100%;
grid-template-columns: 100%;
}
}
you have a typo in your media query you wrote widht instead of width
Related
Mobile view of site
#media screen and (max-width: 600px) {
.sidebar {
width: 100% !important;
height: auto !important;
}
}
#media screen and (max-width: 600px) {
.content {
width: 100% !important;
margin-top: 20px !important;
}
#media screen and (max-width: 600px) {
.jdzn-footer-text img {
width: 100% !important;
}
}
#media screen and (max-width: 600px) {
.featured-card {
width: 100% !important;
}
}
I have already have the meta viewport tag, can anyone help me resolve this? Thanks.
Not sure what your viewport meta tag look like, but you may try replacing yours with this viewport meta tag in your index file.
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
for some reason, #media screen only and (min-device-width: 1366px) and above (#media screen only and (min-device-width: 1600px) etc) are not being recognzed.
I have a div #contentSpace which contains another div #content. #contentSpace should resize depending on the resolution / screen size.
HTML includes <meta content="width=device-width, initial-scale=1" name="viewport" />.
I have tried min-device.width, min-width, removed and included only next to the screen. It does not help.
For example, this CSS works:
#media only screen and (min-device-width: 100px) and (max-device-width: 719px) {
#contentSpace{
width: 90%;
top: unset;
right: unset;
margin-top: 5vh;
margin-left: 5vw;
}
#content{
width: 90%;
}
}
while this does not work...
#media screen and (min-device-width: 1366px){
#contentSpace{
width: 70%;
right: 15%;
}
}
Any help/advice/suggestions are welcome.
Thank you
After an hour of bashing my head against the wall, I discovered I forgot to close one of the #medias with }.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Mobile Styles */
#media only screen and (min-width:0px) and (max-width: 400px) {
body {
background-color: #F09A9D;
/* Red */
}
}
/* Tablet Styles */
#media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E;
/* Yellow */
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
body {
background-color: #B2D6FF;
/* Blue */
}
}
you have to put
at you index.html file in tag like this
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
Please add this
<meta name="viewport" content="width=device-width, initial-scale=1">
in your header, in order to let the browser know the scale on which the media queries will be evaluated
I have two logos: one for small screens and one for large ones.
Rather than different resolutions of the same image, these are two very different .png files and thus I can not use a scaling function. In my attempt to use them, I created the following media queries in a .jsp page with the purpose of editing a div box in order to show the files as background-images:
<style>
<meta name="viewport" content="width=device-width, initial-scale=1">
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
height: 76px;
float: right;
}
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
height: 76px;
float: right;
}
}
</style>
However, this only gives me the smaller logo when the width of the window is below 1199px.
If I expand the window to 1200px or above I receive nothing.
Both images are valid because swapping their position allows me to call either one, but never both.
Can any of you tell me what is wrong with my code?
When using mobile first approach (min-width) the smaller values come first, so your code would be:
.zachery_div {
height: 76px;
float: right;
}
#media (max-width: 1199px) {
.zachery_div {
background: url(/assets/img/SmallLogo.png);
width: 262px;
}
}
#media (min-width: 1200px) {
.zachery_div {
background: url(/assets/img/LargeLogo.png);
width: 764px;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
Note that meta tag shouldn't be inside style tag. but inside head before style
And since you had repeated properties, I put them outside of #media as they are "standard" across the code
I have my CSS file, which looks like this:
.topBarBox{
background-color:black;
}
#media screen and (max-width: 900px) {
.topBarBox{
background-color:blue;
}
}
The background color of the div is black no matter what the screen size is. Am I doing something wrong here?
Change your media query
#media only screen and (max-width : 900px) {
.topBarBox{
background-color:blue;
}
}
You forgot the "only" keyword.
Change it to this:
#media only screen and (max-width: 900px) {
.topBarBox {
background-color:blue;
}
}
Make sure, your HTML page has following line in your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
And also, <!DOCTYPE html> above your <html> section.
This should work with:
.topBarBox{
background-color:black;
}
#media (max-width: 900px) {
.topBarBox{
background-color:blue;
}
}
Also, please make sure that either of html or body does not have any fixed width like:
body, html {
width: 1000px;
}
If there is such any CSS style, then remove it or change it like:
body, html {
width: 100%;
}
This worked fine for me:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.topBarBox {
background-color: black;
}
#media screen and (max-width: 900px) {
.topBarBox {
background-color: blue;
}
}
</style>
</head>
<body>
<div class="topBarBox">
Hello
</div>
</body>
</html>
Maybe you have some styles elsewhere in your CSS that override these styles?
You could try to use the web-inspector, that should make things clear.
Example:
.topBarBox {
background-color: black;
}
#media screen and (max-width: 900px) {
.topBarBox {
background-color: blue;
}
}
<div class="topBarBox">
Hello
</div>