skip to Main Content

I created this Flashcards React web app for my son, and we kept facing this annoying CSS issue where I kept seeing my background color change from black to white when I scrolled down. This issue only happens on a phone.

Phone

enter image description here

As you can can see that it’s working fine on Desktop.

desktop

enter image description here

This is my entire CSS for that page

.thumbnails-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.thumbnail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 300px;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 5px;
    transition: background-color 0.3s;
    background-color: rgba(0, 0, 0, 0.2);
}

https://norden-flashcards.netlify.app/

3

Answers


  1. Set height: 100%; instead of height: 100vh; in your .categories-page class to solve this issue.

    Login or Signup to reply.
  2. By checking your app you should remove the height:100vh of your .categories-page class

     .categories-page {
            background: linear-gradient(135deg,#000,#333 50%);
            background-position: 50%;
            background-size: cover;
            flex-direction: column;
            height: 100vh; ---> remove this line
        }
    
    Login or Signup to reply.
  3. In the rule for .categories-page (= the element that has the dark background), change height: 100vh; to min-height: 100vh; to allow it to grow when there is more content.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search