0

I have an image beside my text that keeps resizing when I view it in a smaller window, mainly on a mobile view. As you can see with my preview, the shorter text does not resize the image. When I write more, the image is resized. I tried to use flex wrap to wrap around the longer text but it just put the image below the text. Is there something I am simply missing? Thanks in advance for the help.

.content-title {
  font-family: "Helvetica Neue", sans-serif;
  color: black;
}

.icon-img {
  background-image: url(https://cdn2.oceansbridge.com/2017/09/16181826/A-hermit-in-a-ruin.-1650-1668-Jan-Adriaensz.-van-Staveren-oil-painting.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
  width: 3.4em;
  height: 3.4em;
}

.content-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<div class="content-container">
  <div class="box">
    <div class="content-heading">
      <h3 class="content-title">Sample of longer longer longer longer longer longer longer longer longer longer longer longer longer text</h3>
      <div class="icon-img"></div>
    </div>
  </div>
</div>

<div class="content-container">
  <div class="box">
    <div class="content-heading">
      <h3 class="content-title">Sample of shorter text</h3>
      <div class="icon-img"></div>
    </div>
  </div>
</div>
balerionthedread
  • 15
  • 4

1 Answers1

0

You can give the .content-title a fixed width of 100% subtracting the img width, using calc, Like this:

width: calc(100% - 3.4em);


.content-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-title {
  font-family: "Helvetica Neue", sans-serif;
  color: black;
  width: calc(100% - 3.4em);
}

.icon-img {
  background-image: url(https://cdn2.oceansbridge.com/2017/09/16181826/A-hermit-in-a-ruin.-1650-1668-Jan-Adriaensz.-van-Staveren-oil-painting.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
  width: 3.4em;
  height: 3.4em;
}
<div class="content-container">
  <div class="box">
    <div class="content-heading">
      <h3 class="content-title">Sample of longer longer longer longer longer longer longer longer longer longer longer longer longer text</h3>
      <div class="icon-img"></div>
    </div>
  </div>
</div>

<div class="content-container">
  <div class="box">
    <div class="content-heading">
      <h3 class="content-title">Sample of shorter text</h3>
      <div class="icon-img"></div>
    </div>
  </div>
</div>


Some useful resources:


Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24