CODEWITHSUNDEEP
htmlcss
Nikita Semenov
Nikita Semenov

Reputation: 2121

CSS div block makes text disappear

I've got the following css file :

.h_bg{
    padding:22.4% 0;
    background-size:100% auto;
    background-position:center top;
    background-repeat:no-repeat;
    position:relative;
    height: 2em;
}
.h_bg h1{
    width: 100%;
    position:absolute;
    line-height:1;
    top: 23%;
    color:#fff;
    font-size:500%;
    text-align: center;
    padding-bottom: 15%;
    background-size:89px 183px;
}

@media screen and (min-width:1001px)
{
    .h_bg{
        background-image:url(/images/bg1-desktop.png);
    }
}

@media screen and (min-width:1001px) and (max-width:1300px)
{
    .h_bg h1{
        background-size:7% auto;
        padding-bottom: 16%;
    }
}

And the following html page :

<!doctype html>
<html>

    <head>
            <title>Beauty app</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>

    <body>

    <div class="h_bg">
        <h1>text</h1>
    </div>

    </body>
</html>

css link extactly to the place, where css file is. Unfortunately, text string is invisible and this code shows blank page. What can be a problem? Any help would be appreciated.

Upvotes: 1

Views: 2010

Answers (1)

Samuel Toh
Samuel Toh

Reputation: 19268

the problem is here:

color:#fff;

The #fff is forcing your H1 text in h_bg class to be white color, therefore it is invisible

Just incase you hit similar issues in future. This is how you can debug it.

Open your browser (i was using chrome) then right click on the element, for your instance its kind of difficult because you can't see it then click on inspect element.

On the bottom right corner you should see your CSS properties, try play around with it till you found your problem.

Upvotes: 3

Related Questions