CODEWITHSUNDEEP
htmlcss
abhiramsanthosh
abhiramsanthosh

Reputation: 39

background-color not working in Chrome mobile browser

Guys I have this pen which works fine in desktop, but when I load the page in mobile the background-color:rgb(255,255,255,0.8) of with class='content' is not working. I use chrome 63 mobile version. Here is the pen: https://codepen.io/abhiramsanthosh/pen/yEKNOx Full view: https://codepen.io/abhiramsanthosh/full/yEKNOx

* {
  box-sizing: border-box;
}
body, html {
  min-height: 100vh;
  background-color: #000;
}
body {
  margin: 0;
  padding: 0;
  background-image: url("joker-heath-ledger-monochrome-dark-wallpaper.jpg");
  background-position: center;
  background-size: cover;
  -moz-background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
div {
  margin: 0;
}
.title {
  min-height: 100vh;
  background-image: url("heath-monochrome.jpg");
  background-position: top center;
  background-size: cover;
  -moz-background-size: cover;
  background-repeat: no-repeat;
}
h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 15vw;
  color: white;
  padding-left: 20px;
  padding-top: 70vh;
  margin: 0;
}
.content {
  min-width: 100%;
  min-height: 100%;
  background-color: rgb(255,255,255,0.8);
}
p {
  font-family: 'Montserrat', sans-serif;
  font-size: 5vw;
  margin: 0;
  padding: 30px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(1,1fr);
}
p.quote {
  font-style: italic;
}
.content p {
  text-indent: 30%;
  text-align: justify;
}
div.extLinks {
  min-height: 100vh;
}
.extLinks p {
  font-size: 4vw;
  color: white;
  padding-top: 90vh;
  text-align: center;
}
a {
  text-decoration: none;
}
a:link {
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  color: green;
}
a:active {
  color: green;
}
@media only screen and (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2,1fr);
  }
  h1 {
    font-size: 10vw;
    padding-left: 30px;
    padding-top: 70vh;
  }
  p {
    font-size: 1.5vw;
  }
  .extLinks p {
    font-size: 1.5vw;
}
<html>
  <body>
    <div class="title">
      <h1>HEATH LEDGER</h1>
    </div>
    <div class="content">
      <p>Heath Ledger was an Academy Award-winning, Australian actor best known for his roles in Brokeback Mountain and The Dark Knight. Heath Ledger was born on April 4, 1979, in Perth, Australia. His breakout role was in the film 10 Things I Hate About You with Julia Stiles. Ledger received Academy Award and Golden Globe nominations for his role in Brokeback Mountain.
    <br><br>In 2008, after completing filming on Christopher Nolan's The Dark Knight, Ledger died as the result of an accidental prescription drug overdose. He received a posthumous Best Actor Academy Award for his performance as "The Joker."</p>
      <div class="grid">
        <div>
          <blockquote><p class="quote">"I've never felt as old as I did watching Heath explore his talents."</p>-Christopher Nolan</blockquote>
        </div>
        <div>
          <blockquote><p class="quote">"Working with Heath was one of the purest joys of my life. He brought to the role of Ennis more than any of us could have imagined - a thirst for life, for love and for truth, and a vulnerability that made everyone who knew him love him."</p>-Ang Lee</blockquote>
        </div>
        <div>
          <blockquote><p class="quote">"I have an impression, a strong impression, I would have liked him very much as a man if I had. I'd already marveled at some of his work, and had looked forward so much to seeing the work that he would do in the future."</p>-Daniel Day-Lewis</blockquote>
        </div>
        <div>
          <blockquote><p class="quote">"I hope people remember what a good actor he was."</p>-Leonard Maltin</blockquote>
        </div>
      </div>
    </div>
    <div class="extLinks">
      <p>To know more about this great actor check out his <a href="https://en.wikipedia.org/wiki/Heath_Ledger" target="_blank">wikipedia page</a></p>
    </div>
  </body>
</html>

Thanks in advance for any help :)

Upvotes: 2

Views: 2919

Answers (2)

Jagjeet Singh
Jagjeet Singh

Reputation: 1572

Replace 

background-color: rgb(255,255,255,0.8)

With

background-color: rgba(255,255,255,0.8)

RGB is a 3-channel format containing data for Red, Green, and Blue.

RGBA is a 4-channel format containing data for Red, Green, Blue, and Alpha.

Upvotes: 3

abhiramsanthosh
abhiramsanthosh

Reputation: 39

I found the problem. rgba() is the function for opacity, not rgb(). (Stabbing myself right now for not learning things right >_<

Upvotes: 0

Related Questions