'SVG as an image goes outside the parent div/container

I struggle with a weird issue. So I'm trying to make a div container with a message to my page users. It's a mix of text, button link and SVG as an image. This is what I have:

div.top-bar-container {
  position: relative;
  z-index: 5;
  width: 100%;
  height: auto;
  background: #e4000f;
  color: #fff;
  font-family: 'Noto Sans', sans-serif;
  text-transform: uppercase;
  max-height: 3em;
}

div.top-bar-container .top-bar-content {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

div.top-bar-container .top-bar-content dl,
div.top-bar-container .top-bar-content dl dt {
  display: inline-block;
}

div.top-bar-container .top-bar-content img {
  width: 100%;
  margin: 0;
  padding: 0;
}
<div class="top-bar-container">
  <div class="top-bar-content">
    <dl class="info-list">
      <dt>Important - Lord of the rings - Definitive Edition coming to your home now <a href="#" title="Read More">Read More</a></dt>
      <dt><img src="https://svgshare.com/i/fnH.svg" alt="Nintendo Switch"></dt>
    </dl>
  </div>
</div>

Jsfiddle: https://jsfiddle.net/djuwn8e5/

What is the issue? At the moment SVG image is going totally outside the container, breaking a single line. In the ideal solution I would like to keep it responsive yet as a one-liner. So in general it's all about fitting the parent container.

Why is that? It's because of the SVG itself?

htmlcssimagesvgparent-child


Solution 1:[1]

You had two dts, second one should be a dd.

top-bar-container had a max-height clipping it, changed it out for min-height. Never set a max-height, let the content determine the layout.

div.top-bar-container {
  position: relative;
  z-index: 5;
  width: 100%;
  height: auto;
  background: #e4000f;
  color: #fff;
  font-family: 'Noto Sans', sans-serif;
  text-transform: uppercase;
  min-height: 3em;
}

div.top-bar-container .top-bar-content {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

div.top-bar-container .top-bar-content dl,
div.top-bar-container .top-bar-content dl dt {
  display: inline-block;
}

div.top-bar-container .top-bar-content img {
  width: 100%;
  margin: 0;
  padding: 0;
}
<div class="top-bar-container">
  <div class="top-bar-content">
    <dl class="info-list">
      <dt>Important - Lord of the rings - Definitive Edition coming to your home now <a href="#" title="Read More">Read More</a></dt>
      <dd><img src="https://svgshare.com/i/fnH.svg" alt="Nintendo Switch"></dd>
    </dl>
  </div>
</div>

Keeping the text a one-liner is difficult. If you know exactly what text it's going to have each time, you can probably get away with something like this:

div.top-bar-container {
  position: relative;
  z-index: 5;
  width: 100%;
  height: auto;
  background: #e4000f;
  color: #fff;
  font-family: 'Noto Sans', sans-serif;
  text-transform: uppercase;
  min-height: 3em;
}

div.top-bar-container .top-bar-content {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

div.top-bar-container .top-bar-content dl,
div.top-bar-container .top-bar-content dl dt {
  display: inline-block;
}

div.top-bar-container .top-bar-content img {
  width: 100%;
  margin: 0;
  padding: 0;
}

.info-list dt {
  --characters: 75;
  --magic-viewport-value: 140vw;
  font-size: calc(var(--magic-viewport-value) / var(--characters));
}
<div class="top-bar-container">
  <div class="top-bar-content">
    <dl class="info-list">
      <dt>Important - Lord of the rings - Definitive Edition coming to your home now <a href="#" title="Read More">Read More</a></dt>
      <dd><img src="https://svgshare.com/i/fnH.svg" alt="Nintendo Switch"></dd>
    </dl>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions