QCard with media content does not accommodate the text lenght

[adi_dragomir]

Hi,
I tried to reroduce the QCard with media content example with a longer text:

<q-card class=“my-card”>
<q-img src=“https://cdn.quasar.dev/img/parallax2.jpg”>
<div class=“absolute-top text-center”>
<div>First column</div>
<div>Second column</div>
<div>Third column</div>
<div>2First column</div>
<div>Second column</div>
<div>Third column</div>
<div>3First column</div>
<div>Second column</div>
<div>Third column</div>
<div>4First column</div>
<div>Second column</div>
<div>Third column</div>
<div>5First column</div>
<div>Second column</div>
<div>Third column</div>
</div>
</q-img>
</q-card>

Unfortunately not all the text is displayed and I do not know what to do to fix it.

Thank you for your help.

Adrian

[Ilia]

@adi_dragomir You can try to omit q-img in that case:

<q-card style="background:url('https://cdn.quasar.dev/img/parallax2.jpg')">
      <div class="text-center">
        <div>First column</div>
        <div>Second column</div>
        <div>Third column</div>
        <div>2First column</div>
        <div>Second column</div>
        <div>Third column</div>
        <div>3First column</div>
        <div>Second column</div>
        <div>Third column</div>
        <div>4First column</div>
        <div>Second column</div>
        <div>Third column</div>
        <div>5First column</div>
        <div>Second column</div>
        <div>Third colum</div>
      </div>
  </q-card>

[adi_dragomir]

Thank you very much, that was the solution !