CSS solution for setting up a condition

Question

I'm using bootstrap to split my blog's homepage posts into 2 columns. In order to avoid one issue (posts badly displayed due to different height, see example here:

I'm defining the article height to 350 pixels (and here you can see it solved:

The problem is this solution causes posts to be displayed one over the other, when visitors are using a small screen (mobile or small tablets).

So I'm currently using a javascript to avoid this, but I think it's not the best solution. Do you know if there's a better CSS method to obtain this same result? (I'm newbie)

Index:

<article class="post col-md-6 main article" id="DeviceScreen">

CSS:

#namisboobs{height:350px;}
#anasboobs{height:auto;}

Header:

<script>
  var el = document.getElementById('DeviceScreen');
    {
    if ($(window).width() < 960)
    { el.innerHTML = (('anasboobs'));
    }
    else { el.innerHTML = 'namisboobs';}
    }
</script>

You have an extra `{` in your js above the js – MaxiGui Nov 09 '21 at 14:18 — MaxiGui, Nov 09 '21 at 14:18
Why dont you use a `display: grid;` to your container ? – MaxiGui Nov 09 '21 at 14:21 — MaxiGui, Nov 09 '21 at 14:21
Do you have two divs or sth in `
`?
– Sato Takeru Nov 09 '21 at 14:21 — Sato Takeru, Nov 09 '21 at 14:21
Or do you have two `
`s in a row or container?
– Sato Takeru Nov 09 '21 at 14:22 — Sato Takeru, Nov 09 '21 at 14:22
There's other way that don't use fixed height like `350px`. – Sato Takeru Nov 09 '21 at 14:27 — Sato Takeru, Nov 09 '21 at 14:27
use `align-self-stretch` class of bootstrap. – Sato Takeru Nov 09 '21 at 14:27 — Sato Takeru, Nov 09 '21 at 14:27

score 0 · Answer 1 · answered Nov 09 '21 at 14:34

You can do like this.

.post {
  background-color: green;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="d-flex flex-wrap justify-content-center">
  <div class="align-self-stretch col-md-6 col-12 post">
    This is sample text.
  </div>
  <div class="align-self-stretch col-md-6 col-12 post">
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.<br>
    This is sample text.
  </div>
</div>

CSS solution for setting up a condition

1 Answers1