Find out the width of the pagination for CSS media query

Question

I am using Bootstrap for a project. For a content element I have created a card. In the card header I use col-md-9 for the headline. By default the height should be 45px. Since the page is supposed to be responsive, I tried to set the height to Automatic from a certain screen width using the media query (@media) in the CSS. However, the problem is that each heading is different in length and thus the point of the wrap of this changes. The goal is that as soon as the heading makes a break the header jumps to height: auto; in CSS. Does anyone know advice?

Thanks a lot!

<div class="card-header">
  <b class="card-ueber col-md-9">Hello together, this is an long text. It should serve as an example and flood this bar with text. 1234567890</b>
  <div class="ca-h-ico"><a class="ico-link" data-bs-toggle="collapse" href="#collapseExample" role="button"
      aria-expanded="false" aria-controls="collapseExample"><span class="icon"><i class="fas fa-info-circle"></i></span></a>
    <a class="ico-link" href="#"><span class="ico-pr"><i class="fa fa-print"></i></span></a>
  </div>
</div>

Here is the link to a sandbox with the code: https://codepen.io/goodyman97/pen/xxpMBbx

Answer 1

You can try adding more breakpoints to get the desired result. Here are some popular breakpoints that are used when using a mobile-first approach:

/* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {...}