I want the body of the page to be responsive so that it is easy for the user to read on a mobile site. But when I use this line of code. I get this mess. Any suggestions?
<meta name="viewport" content="width=device-width">
Thanks in advance!
<!-- Try in this way it may help You --->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
Related
I'm trying to create a square whereas if the square gets clicked the background color of body element gets changed. But the code doesn't seem to work.
Here are the code I used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "square" tabindex="1">
</div>
</body>
</html>
.square{
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body{
background-color: yellow;
}
You will need to use JavaScript to do this in the following way:
let sq = document.querySelector('.square');
sq.addEventListener('focus', ()=>{
document.body.style.backgroundColor = 'yellow';
});
.square {
width: 100px;
height: 100px;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="square" tabindex="1">
</div>
</body>
</html>
HERE WE GO!
use this in script:
function myFunction() {
document.body.style.backgroundColor= "yellow";
It will change pre-decided color to yellow
do not forget to call this fuction via button or link
customize button/link as you want
Check sample code below ---- Run snippet code
<!DOCTYPE html>
<!--code by alok shukla-->
<html>
<body style="background-color: red;">
<button type="button" onclick="myFunction()">Change Color</button>
<script>
function myFunction() {
document.body.style.backgroundColor= "yellow";
}
</script>
</body>
</html>
As #AHaworth pointed out it's not possible to go up in the hierarchy to select the parent element.
Probably the best solution is to use JavaScript as answered by Master Yushi.
However, there's sort of a CSS-only solution if you change a layout a bit. Using the general sibling combinator it's possible to select a sibling element if it comes somewhere after the .square in HTML. So you can add a new div to wrap the entire page inside it. And make .square position: absolute; and position it wherever you need it. It might or might not work for you depending on the page layout you need.
Here's a demo:
.square{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
.bg {
background-color: blue;
height: 100vh;
width: 100vw;
}
.square:focus ~ .bg {
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = "square" tabindex="1">click me</div>
<div class="bg"> </div>
</body>
</html>
Also, one way of doing it is through JQuery. Firstly add JQuery plugin to your HTML code and then add this code to your script.
$(".square").click(function(){
$("body").css("background-color", "yellow")
});
Is this something you wanted? I have added [onclick="document.body.style.backgroundColor ='yellow'] after the body tag. I hope it works for you!
.square {
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body {
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="square" tabindex="1" onclick="document.body.style.backgroundColor ='yellow'"></div>
</body>
</html>
I have the below HTML. For some reason the page is being rendered with the head as text like:
Document
* { display: block; width: 300px; } textarea { height: 300px; }
My Form
I've been searching for an explanation and think it could be because there is an error in the code in the head tag, so the never gets called and it is treated as part of the body, but I can't see any problem with it and VSCode doesn't show any errors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
display: block;
width: 300px;
}
textarea {
height: 300px;
}
</style>
</head>
<body>
<h1>My Form</h1>
<form></form>
</body>
</html>
You can't use display, width and some more properties in "* (universal selector)". Replace * with body selector, it will work :)
I run your code on my system and the header is coming out bold just like it should... maybe you have to clear your browser cookies or try to open the code on an incognito window
.......
then for the
Document
{ display: block; width: 300px; } textarea { height: 300px; }
that is showing, i guess its an error so i removed the "*" and everything works fine... the working code is below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
{
display: block;
width: 300px;
}
textarea {
height: 300px;
}
</style>
</head>
<body>
<h1>My Form</h1>
<form></form>
</body>
</html>
Just deleted all the code to be easier to solve it maybe. The body background color is only applied to the elements but not the entire page.
body {
margin: 0;
background: blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The 2021 Frontend Developer Crash Course</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>mdada</h1>
</body>
</html>
Add body height or min-height
body {
margin: 0;
min-height:100vh;
background: blueviolet;
}
<body>
<h1>mdada</h1>
</body>
For some reason I can't get my media queries working.... Can someone explain what's going on?
Screen size is at 241 (chrome, ie, ff)
CSS
#media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#header
{
display: none;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<p>This is my header</p>
</div>
<p>This is a paragraph</p>
</body>
</html>
edited for misspelling
Double check that your media queries are the last items in your style sheet and are not being overwritten by other applied styles e.g.
<style>
#media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#header
{
display: none;
}
}
body {background-color: white;}
</style>
the example I've given will never change the background-color of the body element as the styling below the media query will over-ride it
What you have works by itself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#head
{
display: none;
}
}
</style>
<title>Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="head">
<p>This is my header</p>
</div>
<p>This is a paragraph</p>
</body>
</html>
Check if you have any other media queries that might be overriding this one. Otherwise maybe it's a link to your stylesheet that's the issue,
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">