Below is the script within my head tag. The min-width:500 is working properly but the immediate next query max-width:499px doesn't seem to work, I tried it with and without screen and and even adding it in styles.css stylesheet didn't work. I'm trying it just on my screen, and it is supposed to work. Can anyone spot what I'm doing wrong?
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h2 {
color: orangered;
text-align: center;
}
#media screen and (min-width: 500px) {
body{
color:greenyellow;
background-color: black;
}
}
#media screen and (max-width: 499px) {
body {
color:pink;
background-color: navy;
}
}
</style>
<link rel = "stylesheet" href = "styles.css">
Can anyone tell why is my VSCode not able to predict mid-width or max-width but accepts it while writing.
I Checked your code in VS Code, it is working fine for Background color but it is not changing color of text(H2 tag), i don't think there is any problem with VS Code you can do this to change text color.
When you are writing media query you are changing background color and text in body, but if you are using h2 tag then it is not working so you should write specific code for h2
Try below code....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h2 {
color: orangered;
text-align: center;
}
#media screen and (min-width: 500px) {
h2 {
color: green;
}
body {
background-color: black;
}
}
#media screen and (max-width: 499px) {
h2 {
color: pink;
}
body {
background-color: navy;
}
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>TechWithVP</h2>
Some other text
</body>
</html>
Related
In my html code below i added a divider which i want the background color to change the blue when it reaches a certain pixel width. Right now my code is having no effect. I want it to the divider to change to blue. How can i get this to work? The code in question is #media (min-width: 551px) {
div { background-color: Blue }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p { font-size: 16px; }
}
#media (min-width: 551px) {
p { font-size: 32px; }
}
#media (min-width: 551px) {
div { background-color: Blue }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
I'm assuming you want the large screen bg color to be lightgrey and the small screen (less than 551px) color to be blue?
If that is the case, you need to specify *max-width on the media query. I would also make sure you call out the div by class so you aren't targeting all your divs.
Try this code.
If I have the colors reversed, you can just switch them.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p { font-size: 16px; }
div.example { background-color: blue }
}
#media (min-width: 551px) {
p { font-size: 32px; }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
You need to add !important to force the CSS according to the screen resolution.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p {
font-size: 16px; !important
}
}
#media (min-width: 551px) {
p {
font-size: 32px; !important
}
}
#media (min-width: 551px) {
div {
background-color: Blue !important
}
}
</style>
</head>
<body>
<div class="example"><p>Example DIV.</p></div>
</body>
There are two reasons this isn't working the way you want it to currently.
First, a style declared outside of a media query has higher "importance" than a style declared inside the media query. In order to combat that, you need to use !important after the media query style.
Second, because you are using a more general object name for the media query, it won't have as much hierarchy once again. Instead of using div, you need to use the same div.example inside the media query.
So the two solutions are either:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
padding: 20px; /* removed the bgcolor here... see below*/
}
#media (max-width: 550px) {
div.example {
background-color: lightgrey; /*option 1: move the gray state into a media query, making it the same level of importance as the blue state*/
}
p { font-size: 16px; }
}
#media (min-width: 551px) {
p { font-size: 32px; }
div.example { background-color: blue} /*option 2: use the same specificity of naming inside the media query.*/
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
I know there is problem related to #media screen out there but sadly it didn't worked for me.
So my style.css look like this
.left-align-item {
margin-left: 20%;
margin-bottom: 80px;
text-align: left;
}
#logo {
margin-top: -65px;
float: left;
margin-left: 20%;
}
ul {
float: right;
margin-top: 24px;
margin-right: 20%;
}
And my responsive.css
#media screen and(max-width: 1360px) {
/*GENERAL*/
.left-align-item {
margin-left: 10%;
}
/*HEADER*/
#logo {
margin-left: 10%;
}
ul {
margin-right: 10%;
}
}
And the head:
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/icon.ico">
<link rel="stylesheet" href="assets/css/fa/css/fontawesome.css">
<link rel="stylesheet" href="assets/css/fa/css/brands.css">
<link rel="stylesheet" href="assets/css/fa/css/solid.css">
</head>
If my screen is smaller than 1360px, the left margin is not resizing from 20% to 10%. I can't quite find the problem here.
From the documentation:
Whitespace is required between a not, and, or or keyword and the following ( character. Without this the parser parses it as a different type of token. Details
Your media query needs to have a space between and and the parenthesis (:
#media screen and (max-width: 1360px) {
/*GENERAL*/
.left-align-item {
margin-left: 10%;
}
/*HEADER*/
#logo {
margin-left: 10%;
}
ul {
margin-right: 10%;
}
}
Everything seems fine, except for the order of the tags placed in the head tag. Try posting tag above title. Hope this might resolve the issue.
It might be a specificity issue. Check the order of style links, make sure responsive.css is declared after style.css
Also check your media query syntax: it must have a space between and
i want to give css for mobile view and tablet view. i have created media tag and wrote the code but its not working i have wrote
at top of the phtml file and wrote class name for which i have give css like below
<code>
<meta name="viewport" content="width=device-width,initial-scale=1.0"> //at top
#media only screen and (max-device-width: 1000px)
{.numbertext
{
font-size: 50px;
color: red;
}
}
</code>
please help me how should i write to get correct output
wrapp your media queries inside the style tag.
<style type="text/css">
#media screen and (max-width: 1000px){
.yourClass{
}
}
</style>
Probably you are missing a style tag.
It should be like this :
<style>
#media only screen and (max-device-width: 1000px)
{
.numbertext
{
font-size: 50px;
color: red;
}
}
</style>
I would normally be able to solve simple CSS problems with just some trial and error (or so I thought). But I've been trying this all day with no luck. At this point I am not sure what to do.
I am trying to center a picture at the top of my page. I am also using a template, and by default there is text there. I figured I could just replace the title text with an image and it would be fine. I was wrong.
To give a better idea of what I am doing, here is a picture of the github template. The part I am referring to is "Sample Title": https://gyazo.com/89d3c00988ce270845b0fe67b55ee5f3
The code for the header looks like this:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Sample Title by Somebody</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Sample Title</h1>
<h2 class="project-tagline"></h2>
View on GitHub
Download .zip
Download .tar.gz
</section>
The stylesheet for the Header portion looks like this (the project-name portions seemed to be related to the Sample Title part though):
.page-header {
color: #fff;
text-align: center;
background-color: #159957;
background-image: linear-gradient(120deg, #155799, #159957); }
#media screen and (min-width: 64em) {
.page-header {
padding: 5rem 6rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.page-header {
padding: 3rem 4rem; } }
#media screen and (max-width: 42em) {
.page-header {
padding: 2rem 1rem; } }
.project-name {
margin-top: 0;
margin-bottom: 0.1rem; }
#media screen and (min-width: 64em) {
.project-name {
font-size: 3.25rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.project-name {
font-size: 2.25rem; } }
#media screen and (max-width: 42em) {
.project-name {
font-size: 1.75rem; } }
.project-tagline {
margin-bottom: 2rem;
font-weight: normal;
opacity: 0.7; }
#media screen and (min-width: 64em) {
.project-tagline {
font-size: 1.25rem; } }
#media screen and (min-width: 42em) and (max-width: 64em) {
.project-tagline {
font-size: 1.15rem; } }
I have tried everything that I know of to try to center the picture (a small logo) where the Sample Title text was with no luck. I've tried doing margins with 50% and auto, absolute positions, and changing the float. I've tried editing the proeject-name stylesheet info, as well as giving the picture an ID and editing it that way. It always ends up in some odd position and I cannot get it to work. Any help would be greatly appriecated!
you should add your image to your source like this:
<h1 class="project-name">
<img src="http://c3154802.r2.cf0.rackcdn.com/ssplogo.jpg"/>
</h1>
no extra css are needed. it will center your image at the top of page.
PS
The src attribute should contain a valid URL. Since space characters are not allowed in URLs, you have to encode them.
This is not currect:
<img id="Statslogo" src="assets/Stats Logo2.png" width="640" height="200"/>
Currect Version:
<img id="Statslogo" src="assets/Stats%20Logo2.png" width="640" height="200"/>
I have written some media queries that do not seem to be working. However when I validate them with W3C it says their are no errors.
Why are my font weights and background colours not changing. My HTML correctly links to my CSS. The following is my CSS:
#media (max-width: 800px) {
body {
background-color: red;
}
h1 {
font-weight: 300;
}
}
#media (min-width: 801px) and (max-width: 1000px) {
body {
background-color: orange;
}
h1 {
font-weight: 600;
}
}
#media (min-width: 1001px) {
body {
background-color: yellow;
}
h1 {
font-weight: 900;
}
}
As requested this is the head:
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Media Query Test</title>
<link type="text/css" rel="stylesheet" src="css/style.css" />
</head>
Make sure you have this in your head tag:
<meta name="viewport" content="width=device-width" />
Found something similar:
CSS3 media queries not working
Wow!
It is late where I am and I have been looking at my code too long.
The problem was in my head. I was using "src" instead of "href" when trying to link my external CSS.
Worst public shaming ever.
Should read:
<link type="text/css" rel="stylesheet" href="css/style.css">