0

Given a div in a Webpage where I want to display an image and a paragraph right next to it. I want the image to get smaller if the size of the screen is getting smaller and the text to go around it. Thus I made the image float to the left, set the width to 40% and the max-width: 380px. That worked just fine. Now under the paragraph I want to display an image grid of three images.

If the screen is is small enough the grid will be under the paragraph and fill the screen. That is how I want it. But if the screen is eventually getting bigger the grid will be under the text. So far so good. But now I get a blank space under the big image depending on the size of the screen. I want that blank space gone( i.e that the height of the image is the same as the combined height of the paragraph and grid). But I don't seem to get it right.

Here how it looks how it should be on a small screen: small screen

And here is the white space I want to get rid of under the image on a big screen: big screen.

Any tips or solutions would by very appreciated

The code for the page using Kirby:

<?php
$chapter = [
  'title' => $data->title(),
  'id' => $data
];
?>
<?php snippet('chapter', ['chapter' => $chapter]) ?>

<div id="contractPlusParagraph">
  <img src=<?= image('studioSonnenstrasse/Vertrag.jpg')->url() ?> id="contract" class="contract-image">
  
  <div class="content-wrap">
    <p>
      <?= $data->firstParagraph()->kirbytext() ?>
    <p>

    <div class="image-grid">
      <img src="<?= image('studioSonnenstrasse/emptyRoom/emptyRoom1.jpg')->url() ?>" class="imageSonnenstraße">
      <img src="<?= image('studioSonnenstrasse/emptyRoom/emptyRoom2.jpg')->url() ?>" class="imageSonnenstraße">
      <img src="<?= image('studioSonnenstrasse/emptyRoom/emptyRoom3.jpg')->url() ?>" class="imageSonnenstraße">
    </div>
  </div>

</div>




<p>
  <?= $data->secondParagraph()->kirbytext() ?>
<p>


  <?php endslot() ?>

  <?php endsnippet() ?>

The current css:

.contractPlusParagraph{
  display:flex;
}

#contract {
  width: 40%;
  max-width: 380px;
  float: left;
  margin-right: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.imageSonnenstraße {
  max-width: 100%;
  height: auto;

}
elpietro
  • 1
  • 1
  • 1
    Personally I really don't mind the white space there. Getting rid of it requires quite a bit of specialized code. I don't think it is worth it. Check other websites on a big screen and you'll see they all have quite a bit of white space. Stack Overflow only goes to 1264px and the middle column only to 727px, leaving lots of white space on my 2650px wide monitor. – KIKO Software Mar 21 '23 at 20:43

1 Answers1

0

EDIT: I just past the picture on a div.

    <?php
$chapter = [
    'title' => $data->title(),
    'id' => $data
    ];
    ?>

    <?php snippet('chapter', ['chapter' => $chapter]) ?>

<div id="contractPlusParagraph">
    <div class="img-left">
        <img src="<?= image('studioSonnenstrasse/Vertrag.jpg')->url() ?>" id="contract" class="contract-image">
    </div>
    <div class="content-wrap">
        <p>
            <?= $data->firstParagraph()->kirbytext() ?>
        <p>
        <div class="image-grid">
            <img src="<?= image('studioSonnenstrasse/emptyRoom/emptyRoom1.jpg')->url() ?>" class="imageSonnenstraße">
            <img src="<?= image('studioSonnenstrasse/emptyRoom/emptyRoom2.jpg')->url() ?>" class="imageSonnenstraße">
            <img src="<?= image('studioSonnenstrasse/emptyRoom/emptyRoom3.jpg')->url() ?>" class="imageSonnenstraße">
        </div>
    </div>
</div>
<p>
    <?= $data->secondParagraph()->kirbytext() ?>
<p>

    <?php endslot() ?>
    <?php endsnippet() ?>

And warning! You do CSS of contractPlusParagraph with .contractPlusParagraph but it's #contractPlusParagraph because it's the ID name! ;)

#contractPlusParagraph{
        display:flex;
    }

    #contract {
        width: 40%;
        max-width: 380px;
        float: left;
        margin-right: 20px;
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .imageSonnenstraße {
        max-width: 100%;
        height: auto;

    }

Have a good day!

Arthur Cottey
  • 43
  • 7