CSS Grid not functioning properly despite validation services giving me the 100%?
0
When running both my HTML and CSS through the validation services I was given the green light yet the code itself doesn't come out using the grid. This is the CSS in question:
body {
display: grid;
grid-template-columns: 6fr;
grid-template-rows: 6fr;
background-color: #f4fff4;
height: 500px;
}
.Background {
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
#Heads {
grid-row-start: 2;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 5;
box-sizing: border-box;
}
.Backdrop {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 6;
}
.Arrow {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 6;
grid-column-end: 6;
box-sizing: border-box;
}
.Regis {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 2;
grid-column-end: 3;
box-sizing: border-box;
}
.Cont {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 4;
grid-column-end: 5;
box-sizing: border-box;
}
.Refer {
grid-row-start: 4;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
box-sizing: border-box;
}
And this is the HTML:
<!doctype html>
<html>
<head>
<title>Website Domain Name</title>
<meta charset="UTF-8">
<meta name="description" content="All in due time.">
<meta name="keywords" content="Git, Code, Win, Yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Hit1.css" rel="stylesheet">
</head>
<body>
<div class="Background">
<header id="Heads">
<h1>Click <a href="http://www.w3schools.com">Here!</a></h1>
<select>
<option>Beans</option>
<option>Cans</option>
<option>Frijole</option>
<option>Jaguar</option>
</select>
</header>
<div class="Backdrop">
<div class="Arrow">
<p><a href="http://www.w3schools.com"><img src="Arrows.jpg" alt="Arrow"></a></p>
</div>
<div class="Regis">
<p><a href="http://www.w3schools.com">Registration</a></p>
</div>
<div class="Cont">
<p><a href="http://www.w3schools.com">Contact Us</a></p>
</div>
<div class="Refer">
<p><a href="http://www.w3schools.com">References</a></p>
</div>
</div>
</div>
</body>
</html>
Any and all ideas or thoughts are appreciated. I'm writing at this point so that the post isn't entirely code. Tyvm! =]
html css css-grid
edited Nov 26 '18 at 12:47
Paulie_D
74.4k96387
asked Nov 26 '18 at 5:40
OJBOJB
11
|
show 1 more comment
0
When running both my HTML and CSS through the validation services I was given the green light yet the code itself doesn't come out using the grid. This is the CSS in question:
body {
display: grid;
grid-template-columns: 6fr;
grid-template-rows: 6fr;
background-color: #f4fff4;
height: 500px;
}
.Background {
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
#Heads {
grid-row-start: 2;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 5;
box-sizing: border-box;
}
.Backdrop {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 6;
}
.Arrow {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 6;
grid-column-end: 6;
box-sizing: border-box;
}
.Regis {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 2;
grid-column-end: 3;
box-sizing: border-box;
}
.Cont {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 4;
grid-column-end: 5;
box-sizing: border-box;
}
.Refer {
grid-row-start: 4;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
box-sizing: border-box;
}
And this is the HTML:
<!doctype html>
<html>
<head>
<title>Website Domain Name</title>
<meta charset="UTF-8">
<meta name="description" content="All in due time.">
<meta name="keywords" content="Git, Code, Win, Yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Hit1.css" rel="stylesheet">
</head>
<body>
<div class="Background">
<header id="Heads">
<h1>Click <a href="http://www.w3schools.com">Here!</a></h1>
<select>
<option>Beans</option>
<option>Cans</option>
<option>Frijole</option>
<option>Jaguar</option>
</select>
</header>
<div class="Backdrop">
<div class="Arrow">
<p><a href="http://www.w3schools.com"><img src="Arrows.jpg" alt="Arrow"></a></p>
</div>
<div class="Regis">
<p><a href="http://www.w3schools.com">Registration</a></p>
</div>
<div class="Cont">
<p><a href="http://www.w3schools.com">Contact Us</a></p>
</div>
<div class="Refer">
<p><a href="http://www.w3schools.com">References</a></p>
</div>
</div>
</div>
</body>
</html>
Any and all ideas or thoughts are appreciated. I'm writing at this point so that the post isn't entirely code. Tyvm! =]
html css css-grid
edited Nov 26 '18 at 12:47
Paulie_D
74.4k96387
asked Nov 26 '18 at 5:40
OJBOJB
11
how did you conform that the stylesheet is loading in the browser? Inspect and see if the classNames have css properties or not. I am asking you this question because I see your link tag in HTML stylesheet name is Hit1.css First letter in uppercase, probably a case you might consider to look at.
– vssadineni
Nov 26 '18 at 5:53
I opened the page through multiple browsers; the background color changed accordingly when I altered them.
– OJB
Nov 27 '18 at 5:45
As we do not know how your layout has to be? and I think you need little practice with grid as well. I see that you used display:grid on body alone. its better if you experiment some more your structure in codepen [codepen.io/anon/pen/xQJyZx#anon-login] I played around with your css a little. unable to replicate your problem.
– vssadineni
Nov 27 '18 at 6:24
And I would rather not use uppercase for the first letter for my classes and id.
– vssadineni
Nov 27 '18 at 6:26
Thank you for your feedback. I tried tweaking things a little. I would like to have the "click here" in the center (now text-align: center; but still not working) and the three bottom divs centered as well. Theoretically, the grid should put them in place from my column/row alignment, but it just doesn't seem to function. After studying a bit more CSS I now also know about calling through specific elements.
– OJB
Nov 27 '18 at 19:18
|
show 1 more comment
0
0
0
When running both my HTML and CSS through the validation services I was given the green light yet the code itself doesn't come out using the grid. This is the CSS in question:
body {
display: grid;
grid-template-columns: 6fr;
grid-template-rows: 6fr;
background-color: #f4fff4;
height: 500px;
}
.Background {
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
#Heads {
grid-row-start: 2;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 5;
box-sizing: border-box;
}
.Backdrop {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 6;
}
.Arrow {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 6;
grid-column-end: 6;
box-sizing: border-box;
}
.Regis {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 2;
grid-column-end: 3;
box-sizing: border-box;
}
.Cont {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 4;
grid-column-end: 5;
box-sizing: border-box;
}
.Refer {
grid-row-start: 4;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
box-sizing: border-box;
}
And this is the HTML:
<!doctype html>
<html>
<head>
<title>Website Domain Name</title>
<meta charset="UTF-8">
<meta name="description" content="All in due time.">
<meta name="keywords" content="Git, Code, Win, Yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Hit1.css" rel="stylesheet">
</head>
<body>
<div class="Background">
<header id="Heads">
<h1>Click <a href="http://www.w3schools.com">Here!</a></h1>
<select>
<option>Beans</option>
<option>Cans</option>
<option>Frijole</option>
<option>Jaguar</option>
</select>
</header>
<div class="Backdrop">
<div class="Arrow">
<p><a href="http://www.w3schools.com"><img src="Arrows.jpg" alt="Arrow"></a></p>
</div>
<div class="Regis">
<p><a href="http://www.w3schools.com">Registration</a></p>
</div>
<div class="Cont">
<p><a href="http://www.w3schools.com">Contact Us</a></p>
</div>
<div class="Refer">
<p><a href="http://www.w3schools.com">References</a></p>
</div>
</div>
</div>
</body>
</html>
Any and all ideas or thoughts are appreciated. I'm writing at this point so that the post isn't entirely code. Tyvm! =]
html css css-grid
edited Nov 26 '18 at 12:47
Paulie_D
74.4k96387
asked Nov 26 '18 at 5:40
OJBOJB
11
When running both my HTML and CSS through the validation services I was given the green light yet the code itself doesn't come out using the grid. This is the CSS in question:
body {
display: grid;
grid-template-columns: 6fr;
grid-template-rows: 6fr;
background-color: #f4fff4;
height: 500px;
}
.Background {
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
#Heads {
grid-row-start: 2;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 5;
box-sizing: border-box;
}
.Backdrop {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 6;
}
.Arrow {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 6;
grid-column-end: 6;
box-sizing: border-box;
}
.Regis {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 2;
grid-column-end: 3;
box-sizing: border-box;
}
.Cont {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 4;
grid-column-end: 5;
box-sizing: border-box;
}
.Refer {
grid-row-start: 4;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
box-sizing: border-box;
}
And this is the HTML:
<!doctype html>
<html>
<head>
<title>Website Domain Name</title>
<meta charset="UTF-8">
<meta name="description" content="All in due time.">
<meta name="keywords" content="Git, Code, Win, Yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Hit1.css" rel="stylesheet">
</head>
<body>
<div class="Background">
<header id="Heads">
<h1>Click <a href="http://www.w3schools.com">Here!</a></h1>
<select>
<option>Beans</option>
<option>Cans</option>
<option>Frijole</option>
<option>Jaguar</option>
</select>
</header>
<div class="Backdrop">
<div class="Arrow">
<p><a href="http://www.w3schools.com"><img src="Arrows.jpg" alt="Arrow"></a></p>
</div>
<div class="Regis">
<p><a href="http://www.w3schools.com">Registration</a></p>
</div>
<div class="Cont">
<p><a href="http://www.w3schools.com">Contact Us</a></p>
</div>
<div class="Refer">
<p><a href="http://www.w3schools.com">References</a></p>
</div>
</div>
</div>
</body>
</html>
Any and all ideas or thoughts are appreciated. I'm writing at this point so that the post isn't entirely code. Tyvm! =]
html css css-grid
html css css-grid
edited Nov 26 '18 at 12:47
Paulie_D
74.4k96387
asked Nov 26 '18 at 5:40
OJBOJB
11
edited Nov 26 '18 at 12:47
Paulie_D
74.4k96387
asked Nov 26 '18 at 5:40
OJBOJB
11
edited Nov 26 '18 at 12:47
Paulie_D
74.4k96387
edited Nov 26 '18 at 12:47
Paulie_D
74.4k96387
edited Nov 26 '18 at 12:47
Paulie_D
74.4k96387
74.4k96387
asked Nov 26 '18 at 5:40
OJBOJB
11
asked Nov 26 '18 at 5:40
OJBOJB
11
asked Nov 26 '18 at 5:40
OJBOJB
11
11
how did you conform that the stylesheet is loading in the browser? Inspect and see if the classNames have css properties or not. I am asking you this question because I see your link tag in HTML stylesheet name is Hit1.css First letter in uppercase, probably a case you might consider to look at.
– vssadineni
Nov 26 '18 at 5:53
I opened the page through multiple browsers; the background color changed accordingly when I altered them.
– OJB
Nov 27 '18 at 5:45
As we do not know how your layout has to be? and I think you need little practice with grid as well. I see that you used display:grid on body alone. its better if you experiment some more your structure in codepen [codepen.io/anon/pen/xQJyZx#anon-login] I played around with your css a little. unable to replicate your problem.
– vssadineni
Nov 27 '18 at 6:24
And I would rather not use uppercase for the first letter for my classes and id.
– vssadineni
Nov 27 '18 at 6:26
Thank you for your feedback. I tried tweaking things a little. I would like to have the "click here" in the center (now text-align: center; but still not working) and the three bottom divs centered as well. Theoretically, the grid should put them in place from my column/row alignment, but it just doesn't seem to function. After studying a bit more CSS I now also know about calling through specific elements.
– OJB
Nov 27 '18 at 19:18
|
show 1 more comment
how did you conform that the stylesheet is loading in the browser? Inspect and see if the classNames have css properties or not. I am asking you this question because I see your link tag in HTML stylesheet name is Hit1.css First letter in uppercase, probably a case you might consider to look at.
– vssadineni
Nov 26 '18 at 5:53
I opened the page through multiple browsers; the background color changed accordingly when I altered them.
– OJB
Nov 27 '18 at 5:45
As we do not know how your layout has to be? and I think you need little practice with grid as well. I see that you used display:grid on body alone. its better if you experiment some more your structure in codepen [codepen.io/anon/pen/xQJyZx#anon-login] I played around with your css a little. unable to replicate your problem.
– vssadineni
Nov 27 '18 at 6:24
And I would rather not use uppercase for the first letter for my classes and id.
– vssadineni
Nov 27 '18 at 6:26
Thank you for your feedback. I tried tweaking things a little. I would like to have the "click here" in the center (now text-align: center; but still not working) and the three bottom divs centered as well. Theoretically, the grid should put them in place from my column/row alignment, but it just doesn't seem to function. After studying a bit more CSS I now also know about calling through specific elements.
– OJB
Nov 27 '18 at 19:18
how did you conform that the stylesheet is loading in the browser? Inspect and see if the classNames have css properties or not. I am asking you this question because I see your link tag in HTML stylesheet name is Hit1.css First letter in uppercase, probably a case you might consider to look at.
– vssadineni
Nov 26 '18 at 5:53
how did you conform that the stylesheet is loading in the browser? Inspect and see if the classNames have css properties or not. I am asking you this question because I see your link tag in HTML stylesheet name is Hit1.css First letter in uppercase, probably a case you might consider to look at.
– vssadineni
Nov 26 '18 at 5:53
I opened the page through multiple browsers; the background color changed accordingly when I altered them.
– OJB
Nov 27 '18 at 5:45
I opened the page through multiple browsers; the background color changed accordingly when I altered them.
– OJB
Nov 27 '18 at 5:45
As we do not know how your layout has to be? and I think you need little practice with grid as well. I see that you used display:grid on body alone. its better if you experiment some more your structure in codepen [codepen.io/anon/pen/xQJyZx#anon-login] I played around with your css a little. unable to replicate your problem.
– vssadineni
Nov 27 '18 at 6:24
As we do not know how your layout has to be? and I think you need little practice with grid as well. I see that you used display:grid on body alone. its better if you experiment some more your structure in codepen [codepen.io/anon/pen/xQJyZx#anon-login] I played around with your css a little. unable to replicate your problem.
– vssadineni
Nov 27 '18 at 6:24
And I would rather not use uppercase for the first letter for my classes and id.
– vssadineni
Nov 27 '18 at 6:26
And I would rather not use uppercase for the first letter for my classes and id.
– vssadineni
Nov 27 '18 at 6:26
Thank you for your feedback. I tried tweaking things a little. I would like to have the "click here" in the center (now text-align: center; but still not working) and the three bottom divs centered as well. Theoretically, the grid should put them in place from my column/row alignment, but it just doesn't seem to function. After studying a bit more CSS I now also know about calling through specific elements.
– OJB
Nov 27 '18 at 19:18
Thank you for your feedback. I tried tweaking things a little. I would like to have the "click here" in the center (now text-align: center; but still not working) and the three bottom divs centered as well. Theoretically, the grid should put them in place from my column/row alignment, but it just doesn't seem to function. After studying a bit more CSS I now also know about calling through specific elements.
– OJB
Nov 27 '18 at 19:18
|
show 1 more comment
1 Answer
1
active
oldest
votes
-1
.Background {
display: grid;
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
.Background div{
display: grid;
}
answered Nov 26 '18 at 6:55
kaluoghkaluogh
344
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Kiran Shahi
Nov 26 '18 at 11:42
Do you have a try, you grid-xxx-xxx do not work, because display is not grid.
– kaluogh
Nov 28 '18 at 1:59
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475287%2fcss-grid-not-functioning-properly-despite-validation-services-giving-me-the-100%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
-1
.Background {
display: grid;
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
.Background div{
display: grid;
}
answered Nov 26 '18 at 6:55
kaluoghkaluogh
344
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Kiran Shahi
Nov 26 '18 at 11:42
Do you have a try, you grid-xxx-xxx do not work, because display is not grid.
– kaluogh
Nov 28 '18 at 1:59
add a comment |
-1
.Background {
display: grid;
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
.Background div{
display: grid;
}
answered Nov 26 '18 at 6:55
kaluoghkaluogh
344
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Kiran Shahi
Nov 26 '18 at 11:42
Do you have a try, you grid-xxx-xxx do not work, because display is not grid.
– kaluogh
Nov 28 '18 at 1:59
add a comment |
-1
-1
-1
.Background {
display: grid;
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
.Background div{
display: grid;
}
answered Nov 26 '18 at 6:55
kaluoghkaluogh
344
.Background {
display: grid;
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}
.Background div{
display: grid;
}
answered Nov 26 '18 at 6:55
kaluoghkaluogh
344
answered Nov 26 '18 at 6:55
kaluoghkaluogh
344
answered Nov 26 '18 at 6:55
kaluoghkaluogh
344
answered Nov 26 '18 at 6:55
kaluoghkaluogh
344
344
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Kiran Shahi
Nov 26 '18 at 11:42
Do you have a try, you grid-xxx-xxx do not work, because display is not grid.
– kaluogh
Nov 28 '18 at 1:59
add a comment |
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Kiran Shahi
Nov 26 '18 at 11:42
Do you have a try, you grid-xxx-xxx do not work, because display is not grid.
– kaluogh
Nov 28 '18 at 1:59
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Kiran Shahi
Nov 26 '18 at 11:42
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Kiran Shahi
Nov 26 '18 at 11:42
Do you have a try, you grid-xxx-xxx do not work, because display is not grid.
– kaluogh
Nov 28 '18 at 1:59
Do you have a try, you grid-xxx-xxx do not work, because display is not grid.
– kaluogh
Nov 28 '18 at 1:59
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53475287%2fcss-grid-not-functioning-properly-despite-validation-services-giving-me-the-100%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
how did you conform that the stylesheet is loading in the browser? Inspect and see if the classNames have css properties or not. I am asking you this question because I see your link tag in HTML stylesheet name is Hit1.css First letter in uppercase, probably a case you might consider to look at.
– vssadineni
Nov 26 '18 at 5:53
I opened the page through multiple browsers; the background color changed accordingly when I altered them.
– OJB
Nov 27 '18 at 5:45
As we do not know how your layout has to be? and I think you need little practice with grid as well. I see that you used display:grid on body alone. its better if you experiment some more your structure in codepen [codepen.io/anon/pen/xQJyZx#anon-login] I played around with your css a little. unable to replicate your problem.
– vssadineni
Nov 27 '18 at 6:24
And I would rather not use uppercase for the first letter for my classes and id.
– vssadineni
Nov 27 '18 at 6:26
Thank you for your feedback. I tried tweaking things a little. I would like to have the "click here" in the center (now text-align: center; but still not working) and the three bottom divs centered as well. Theoretically, the grid should put them in place from my column/row alignment, but it just doesn't seem to function. After studying a bit more CSS I now also know about calling through specific elements.
– OJB
Nov 27 '18 at 19:18