Search code examples
htmlcssimagealignment

How to make this image move to the right?

So, I was doing this Frontend Mentor challenge (at https://www.frontendmentor.io/challenges/notifications-page-DqK5QAmKbC) while I had run into this problem - I couldn't align the "Chess" image in the "Kimberly Smith" notification to the right.

Here is all the code I have written related to the notification: The HTML:

<div class="notification">
  <div class="notification__container">
    <img src="assets\images\avatar-kimberly-smith.webp" class="image" />
    <div class="notification-formatting">
      <div class="align-right">
        <div><strong>Kimberly Smith</strong> commented on your picture
          <br /><time>1 week ago</time>
        </div>
        <div class="img-container"><img src="assets/images/image-chess.webp" alt="Chess" class="image chess"></div>
      </div>
    </div>
  </div>
</div>

The CSS:

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
.notification {
  background-color: #f6fafd;
  display: flex;
  align-items: center;
}
.notification__container {
  display: flex;
  align-items: center;
}
.image {
  display: flex;
  align-items: center;
  width: 50px;
  margin-right: 5px;
}
.notification_image--main-message-content {
  display: flex;
}
.align-right {
  display: flex;
}

Here is the Output
Here is the Expected Output

Here are the solutions I have tried:

display: block;
margin-left: auto;

float: right;

text-align: right;

display: flex;
justify-content: right;

Here is the live website: https://prismatic-capybara-4ba8da.netlify.app/
Here is the GitHub Repository for deeper reference: https://github.com/vishalscodes/frontendmentor-notifications-page

Thank You.

Solution

  • It's possible to massively simplify your markup as follows:

    • Class notification. This is a flex box so items will try to fit side by side on one line. As the user's image, the main text and the 'chess' image are all on one line we don't need to add any more divs to this. We can just insert them directly, especially as you've made all img elements as blocks (this is always a good move imho).
    • Class notification-formatting is used to isolate the text so that the text and time stack on top of each other. As this is a flex item, this will try to shrink to fit the content.
    • We don't need a wrapper around the image with the chess class as that's already a block level element so to get that to move to the right I've added an align-right class. That simply has an inline-margin of auto 0. This is a fairly standard way of moving elements to the right of the page.

    Some good resources here:

    Any questions just drop me a comment and I'll try help out.

    img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
.notification {
  background-color: #f6fafd;
  display: flex;
  gap: 5px; /* I've removed the margin-right from your image and set the gap on the parent element so your 'chess' image moves all the way to the right */
}

.image {
  width: 50px;
  border-radius: 5px;
}

.align-right {
  margin-inline: auto 0; /* if we set the right margin to 0 then setting the left margin to 'auto' causes it to expand to fit the available width */
}

.round {
  border-radius: 100vw; /* make the radius massive so it defaults to a circle */
}
    <div class="notification">
  <img src="https://picsum.photos/id/64/50/50" class="image round" />
  <div class="notification-formatting">
    <strong>Kimberly Smith</strong> commented on your picture
    <br /><time>1 week ago</time>
  </div>
  <img src="https://picsum.photos/id/237/50/50" alt="Chess" class="image align-right">
</div>