Search code examples
htmlcssbootstrap-cards

Cards are not displaying correctly inside of main tag

I am currently working on a little dashboard.

I have a file named profile.php in which I tried to create a card with html and css to display some values of the user.

However it seems that nothing works on properly displaying the card.. Underneath is the code I used to create the card:

<main>
  <div class="card">
    <div class="container">
      <p> Username: <?= $_SESSION['username'] ?> </p>
    </div>
  </div>
</main>

Inside my css for the profile page itself the only time I am doing something with the main tag is this part:

main {
    margin-left: 5rem;
    padding: 1rem;
}

To style the card for testing I use the snippet from W3Schools:

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}

This is how it looks on the site:

enter image description here

However, the problem now is that despite trying everything I had in my mind which could work it just won't display the box of the card. It just prints the text on the page with no styling at all. Has this something to do with the main tag? Is it not possible to render box shadows or any styling related stuff? I don't believe that .. I mean why would it be that way.

Solution

  • It works like you can see, maybe some css override card class (then rename card to something else), or your css isn't applied. Try to debug in dev tools.

    .card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  padding: 2px 16px;
}
main {
    margin-left: 5rem;
    padding: 1rem;
}
    <main>
  <div class="card">
    <div class="container">
      <p> Username: darby </p>
    </div>
  </div>
</main>