Why is the background color of my DIV element not visible?

Question

/**This code doesnt change the color of the class row1**/

html, body {
  font-family :'montserrat',sans-serif;
  }
h1 {
  border-left  : 2px solid #00f28f;
  font-size    : 48px;
  font-weight  : 400;
  padding-left : 20px;
  }
.main {
  margin-top : 80px;
  }
form input {
  background : #F0f0f0;
  border     : none;
  font-size  : 36px;
  padding    : 20px;
  width      : 100%;
  transition : background 0s, border-left 0s;
  }
form input:focus {
  background  : #fff;
  border-left : 2pxsolid #000;
  box-shadow  : none;
  outline     : none;
  }
button.button {
  background : transparent;
  border     : none;
  color      : #00f2bf;
  cursor     : pointer;
  font-size  : 36px;
  padding    : 20px 24px;
  transition : background 0s, border-left 0s;
  }
button.button:hover {
  background : #00f2bf;
  color      :  #fff;
  }
.row1 {
  background : yellowgreen;
  }

<link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="C:\Users\kalyanasundar.s\OneDrive - HCL Technologies Ltd\Desktop\proj\proj.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


<header class="header">
  <div class="container">
    <div class="row">
      <div class="col-xs-2 col-md-2">
        <h1>Kalyan The Coder</h1>
      </div>
    </div>
  </div>
</header>
<div class="main">
  <div class="container2">
    <div class="row1">
      <form class="form">
        <div class="col-xs-8 col-md-4">
          <input type="text" id="TextBox1" placeholder="Enter your query">
        </div>
        <div class="col-xs-4 col-md-2">
          <button type="submit" class="button">post</button>
        </div>

This command works fine except that the row1 color doesn't change and not sure why.
If I change row1 to row on CSS, the color of header changes. I am not sure how to change the class in the CSS style sheet.
I am beginner and would like to explore more on this.

no, this is quite normal, imaginary commands always do anything — Mister Jojo, Oct 08 '21 at 21:06
What @MisterJojo is trying to say is welcome to Stack Overflow! We unfortunately need to see your code in order to be of any assistance. As it stands currently, your question is likely to be closed as "needs improvement". — Hazel へいぜる, Oct 08 '21 at 21:14
With that edit, you're getting warmer! Now, *why* should we expect the color of `row1` to change? I understand we can infer it from your code, but why do *you* believe it should? Is this just the desired effect and it's not working? — Hazel へいぜる, Oct 08 '21 at 21:17
There is a class in html called row1. There is a reference to that class in css sheet. Now row1 has to be yellow green is what i have asked for. Thats the reason — Kalyan Sundar, Oct 08 '21 at 21:22

score -2 · Accepted Answer · answered Oct 08 '21 at 21:23

-2

You need to give your element height.

It helps to simplify the problem. Currently, if you add height: 100px to your row1 class, the background becomes a visible yellowgreen as you desire:

.row1 {
    background: yellowgreen;
    height: 100px;
}

Let's show the difference with a simplified snippet:

.row-1 { background-color: yellowgreen; }
.row-2 {
  height: 100px;
  background-color: red;
}

<div class="row-1"></div>
<div class="row-2"></div>

Notice how you can't see row-1 here? Adding a height, padding, or anything else that expands the div's area will make it show:

.row-1 { background-color: yellowgreen; }

<div class="row-1">
  <p>This should make the row visible.</p>
</div>

answered Oct 08 '21 at 21:23

Hazel へいぜる

2,751
1
12
44

Thank you so much Taco. I would be grateful to you for this kind gesture. Happy to learn it from you. This help in understanding the code mean a lot in my career in coding. :-) – Kalyan Sundar Oct 08 '21 at 21:27
Also, when I add a class ".row" and add color to it without mentioning height, It works. Why do i need to add height for one row alone ? – Kalyan Sundar Oct 08 '21 at 21:27
@KalyanSundar As I mentioned, a `div` has no height by default. Without height you're not going to see the background color. – Hazel へいぜる Oct 08 '21 at 21:33
SOrry to bother you again. Like you said div doesnt have a height. In the same snippet, I have a class called as row where I add color without mentioning height. does it work because its in the header? – Kalyan Sundar Oct 08 '21 at 21:40
@KalyanSundar no, as I mentioned before; it shows color because it has *content*. – Hazel へいぜる Oct 08 '21 at 21:45

Why is the background color of my DIV element not visible?

1 Answers1