How to neatly place the ranking to the left of a picture in CSS

user_12691890 0
Viewed 195

Currently, my HTML looks like this

However, I want to make it look similar to this where the picture and ranking don't overlap.

This is my CSS and HTML for the element.

.star-list {
  display: flex;
  align-items: center;
  padding: 5px;
  width: 680px;
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0px 10px 20px -6px #1abc9c;
  background-color: #fff;
  border-radius: 10px;
  height: 155px;
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 10px;
  font-size: 5vw;
}

.star-list>img {
  height: 140px;
  border-radius: 10px;
}

.star-list>.media-content {
  width: 1000px;
  display: flex;
  justify-content: center;
  font-weight: 600;
  font: black;
  font-size: 5vw;
}
<div class="card_body">
  <div>
    <div class="card word_shadow2">
      <div class="card-header">
        RANKING
      </div>
      <div class="card-body" id="star-box">
        <div class="star-list">
          1
          <img src="https://api.buzzanglemusic.com/images/artists/771" alt="Placeholder image" />
          <span class="media-content">
                Eagles
              </span>
        </div>
      </div>
    </div>
  </div>
</div>

I would like the ranking to not overlap with the picture. Thanks.

frontend css html
3 Answers

.star-list {
  display: flex;
  align-items: center;
  padding: 5px;
  width: 680px;
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0px 10px 20px -6px #1abc9c;
  background-color: #fff;
  border-radius: 10px;
  height: 155px;
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 10px;
  font-size: 5vw;
}

.star-list p.rank {
  padding: 0 50px;
  font-weight: 700;
}

.star-list>img {
  height: 140px;
  border-radius: 10px;
}

.star-list>.media-content {
  width: 1000px;
  display: flex;
  justify-content: center;
  font-weight: 600;
  font: black;
  font-size: 5vw;
}
<div class="card_body">
  <div>
    <div class="card word_shadow2">
      <div class="card-header">
        RANKING
      </div>
      <div class="card-body" id="star-box">
        <div class="star-list">
          <p class="rank">1</p>
          <img
        src="https://api.buzzanglemusic.com/images/artists/771"
            alt="Placeholder image"
          />
          <span class="media-content">
            Eagles
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

user_105645250

I just enclosed the ranking number in a p tag and then gave it an id and then set the left and right margins to 40px.

.star-list {
    display: flex;
    align-items: center;
    padding: 5px;
    width: 680px;
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0px 10px 20px -6px #1abc9c;
    background-color: #fff;
    border-radius: 10px;
    height: 155px;
    margin-top: 20px;
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 5vw;
  }

  .star-list > img {
    height: 140px;
    border-radius: 10px;
  }

  .star-list > .media-content {
    width: 1000px;
    display: flex;
    justify-content: center;
    font-weight: 600;
    font: black;
    font-size: 5vw;
  }

  #ranking {
    margin-right: 40px;
    margin-left: 40px;
  }
<div class="card_body">
  <div>
    <div class="card word_shadow2">
      <div class="card-header">
        RANKING
      </div>
      <div class="card-body" id="star-box">
        <div class="star-list">
          <p id="ranking">1</p>
          <img
            src="https://api.buzzanglemusic.com/images/artists/771"
            alt="Placeholder image"
          />
          <span class="media-content">
            Eagles
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

user_134874240 

img { /* reasonable defaults site-wide */
  display: block;
  width: 100%;
  height: auto;
}

picture {
  display: block; /* inline by default :/ */
}

.parent {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid red;
  padding: 10px;
}

.parent picture {
  max-width: 150px; /* let the image parent determine it's size */
  margin: 0 10px; /* just to give a little space between text */
}
<div class='parent'>
  <h3 class='rank'>10</h3>

  <picture>
    <img src='https://placehold.it/600x300'>
  </picture>

  <h2 class='name'>@sheriffderek</h2>
</div>

So, anything within a parent - can be organized with flex - as long as they are direct children! Fun!!!

user_13994560
Related