Why isnt my html and css grid not working? [closed] - html

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 months ago.
Improve this question
<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>
</style>
</head>
<body>
<div style="
display: grid;
grid-template-columns: 100px, 100px;">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">div 2</div>
</div>
</body>
</html>
I've been trying to make a grid in HTML and CSS and it's not working. Im new to CSS and HTML so please tell me what I did wrong thanks!


You should remove comma in grid-template-columns, write like this:
display: grid;
And
grid-template-columns: 100px 100px;
Also you can write like below and it's better
grid-template-columns: auto auto;
See here


There was just one error you have made in grid-template-columns there must be no comma should be included, so it must look like this grid-template-column:100px 100px;
<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>
</style>
</head>
<body>
<div style="
display: grid;
grid-template-columns: 100px 100px;">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">div 2</div>
</div>
</body>
</html>


You can use grid-template-columns: auto in this case. Hope that solves you
<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 style="display: grid; grid-template-columns: auto auto auto;">
<div style="background-color: lightblue;">div 1</div>
<div style="background-color: lightpink;">div 2</div>
<div style="background-color: rgb(34, 192, 3);">div 2</div>
</div>
</body>
</html>

Related

the edge of text overflows from div with display : inline

how can I prevent this? the edge of the "f" character is overflowing from div. how can I make it fit the text?
HTML code :
<!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="parent" style="display: inline; background-color: coral; font-size: 200px;">test f</div>
</body>
</html>

You can also try padding to left and right.
<!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="parent" style="display: inline; padding:0 25px; background-color: coral; font-size: 200px;">test f</div>
</body>
</html>

Image doesn't show up [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
Im new to HTML & CSS and I can't figure out why my image doesn't show up. This is my code.
.test {
width: 100%;
height: 100%
}
<!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=test>
<img src="file:///Users/myname/Desktop/picture%201.jpg" alt="">
</div>
</body>
</html>

Your mistake is here src="file:///Users/myname/Desktop/picture%201.jpg" you are missing drive name before Users such as C: or D: file:///C:/Users/myname/Desktop/picture%201.jpg
Your src="" suppose to look like src="YourProject/imagefolder/picture.jpg"
I used a random online available picture. src="https://media.istockphoto.com/photos/human-crowd-forming-a-chain-symbol-bonding-and-social-media-concept-picture-id936347578"
.test {
width: 100%;
height: 100%
}
<!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="test">
<!-- <img src="file:///Users/myname/Desktop/picture%201.jpg" alt=""> -->
<img src="https://media.istockphoto.com/photos/human-crowd-forming-a-chain-symbol-bonding-and-social-media-concept-picture-id936347578" alt="">
</div>
</body>
</html>

The problem is with your image path mentioned in the src. you have to mention the correct image path otherwise the image won't display in your page.
.test {
width: 100%;
height: 100%
}
<!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=test>
<img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
</body>
</html>

HTML images dissappearing,not loading

I am saving my code and refreshing it. I dont think I did anything wrong. I am trying to make a Parallax website, I didn't add it yet because the image itself couldn't even load.
This is the code. It's not loading in any way. Completely white.
.img-1{
background-image: url("Image1.jpg");
margin-left: auto;
margin-right: auto;
}
Not so important but here's HTML section of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="parallax.css">
</head>
<body>
<div class="img-1">
</div>
</body>
</html>

Your div is of 0 height - background-image doesn't give it any height.

Twitter Bootstrap Text in Div extends beyond its column

I created a test html page using Twitter Bootstrap 4 Alpha 2. As shown below I have three divs with col-md-4 each. The first div has text wrapped in p. The problem is the text extends beyond it's container occupying the space of the other 2 divs. How do you keep the text in its own column?
<!doctype html>
<html class="no-js" 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>Bootstrap Template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<style>
div {
border-style: solid;
border-color: #0000ff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.mi1n.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>

This is 100% work for you:
p{word-break: break-all;}

Just Add 'overflow:auto;' to your Style code.
border-style: solid;
border-color: #0000ff;
overflow:auto;

There is extra vertical space between block-level elements when setting initial-scale=1.x in Chrome

If I add the following meta tag to my mobile web page , there is extra space between block-level elements in vertical direction.
<meta name="viewport" content="initial-scale=1.2,user-scalable=no" id="metaViewwport">
How to solve the problem?
The complete code:
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.2,user-scalable=no" id="metaViewwport">
<title>test</title>
<style type="text/css">
html,body
{width:100%;height: 100%;margin:0px;padding:0px;}
.slide-container
{height:200px;width:100%;background-color:black;color:white;
box-sizing:border-box;
box-shadow:none;
border:0px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<article style="height:100%;width:100%;">
<section class="slide-container" style="">
1
</section>
<section class="slide-container">2</section>
<section class="slide-container">
3
</section>
<section class="slide-container">
4
</section>
</article>
</body>
</html>

your problem is your viewport more than likely. Its set to 1.2, rather than 1.
add this line instead
<meta name="viewport" content="width=device-width, initial-scale=1">

I fixed by add height=device-height to the meta viewport. Just like:
<meta name="viewport" content="initial-scale=1.171875,height=device-height,width=320px, user-scalable=no">