CODEWITHSUNDEEP
htmlcss
naser
naser

Reputation: 1

how to make notification page i am struggling with user box

I want it to look like this

enter image description here

but it look's like this

enter image description here

I used max-height it didn't work I used position it didn't work I messed with size it didn't work

body {
  text-align: center;
  background: hsl(210, 60%, 98%);
  font-family: sans-serif;
  margin: 0;
}

#Notifications-page {
  display: table;
  max-width: 90%;
  min-width: 150px;
  border-radius: 15px;
  text-align: center;
  margin: 5% 25% 5% 25%;
  padding-bottom: 10px;
  background-color: hsl(0, 0%, 100%);
}

.relative-left {
  position: relative;
  float: left;
}

.messages {
  display: table;
  width: 90%;
  margin: auto;
  border-radius: 15px;
  background-color: white;
}

.unread-color {
  background-color: hsl(211, 68%, 94%);
}

.user-img {
  width: 7%;
  margin: 15px;
}

.messages-h1 {
  font-size: 1.3rem;
  margin-right: 8px;
  margin-bottom: 0;
  font-weight: bold;
}

.P-margin {
  margin: 21px 4px 0 4px;
}

.P-1 {
  color: gray;
}

.P-2 {
  color: hsl(219, 12%, 42%);
  font-weight: bold;
  margin-right: auto;
}

.P-3 {
  display: block;
  margin-right: 80%;
  position: relative;
  float: right;
  font-size: 0.8rem;
}
<section id="Notifications-page">
  <div class="messages unread-color relative-left">
    <img class="  user-img relative-left" src="assets\images\avatar-nathan-peters on.webp" alt="">
    <p class="  relative-left messages-h1">Nathan Peterson </p>
    <p class="  relative-left P-margin P-1"> reacted to your recent post</p>
    <p class="  relative-left P-margin P-2">5 end-game strategies to increase your win rate</p>
    <p class="P-3">2 weeks ago</p>
  </div>
</section>

Upvotes: 0

Views: 98

Answers (1)

Daniel Sepulveda
Daniel Sepulveda

Reputation: 11

You would want none of those elements to be block, as from seen in the desired result the elements are all inline (except for the bottom timestamp). This should suffice:

*
{
  font-family: 'Arial', sans-serif;
  margin: 0;
}

html, body
{
  height: 100%;
}

body
{
  background: whitesmoke;
  display: flex;
}

section#Notifications-page
{
  background: white;
  margin: 0 auto;
  color: gray;
  width: 600px;
}

section#Notifications-page > div
{
  padding: 40px;
  display: flex;
  gap: 15px;
}

section#Notifications-page > div img
{
  height: 40px;
  width: 40px;
  object-fit: cover;
  border-radius: 50%;
}

section#Notifications-page > div div
{
  flex: 1;
}

b.user
{
  color: black;
}
<section id="Notifications-page">
  <div>
    <img src="https://cdn1.vectorstock.com/i/thumb-large/77/30/default-avatar-profile-icon-grey-photo-placeholder-vector-17317730.jpg" alt="">
    <div>
      <p><b class = 'user'>Nathan Peterson</b> reacted to your recent post <b>5 end-game strategies to increase your win rate</b></p>
      <small>2 weeks ago</small>
    </div>
  </div>
</section>

Upvotes: 1

Related Questions