-1

Is it possible to change the position of elements (depending on media queries) and still use vertical-centering? Back in the past this wasn't possible with pure css but how about now? I thought about a combination of flexboxes with css grids but I can't get it to work. Is it still not possible?

This question is no duplicate because I asked about vertical centering elements on desktop view that can change the order in mobile. There are 3 different elements at minimum (can even be more). The linked answer doesn't answer this. It just shows how to order elements for different views but ignores the vertical alignment.

Here a picture of the view I want to achieve:

Desktop view: enter image description here

Mobile view:

enter image description here

And here the code:

<div class="wrap">
    <h2>Headline</h2>
    <img src="..." />
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>
Insomnia88
  • 378
  • 2
  • 13
  • You need to post your code. – Johannes Feb 18 '22 at 13:03
  • I am not quite sure if I understand your problem as the way you present it it can easily be solved with CSS grid or flexbox. And as far as I know this is / was the case ever since there is grid and flexbox. Drop a sandbox link if you need some help. – Aaron Feb 18 '22 at 13:06
  • well I tried it with flexbox and it's not so far. Yeah, I can align them like this with pure flexbox but not with vertical-centering. You noticed that the headline and content are in different boxes, right? Because that's the tricky part. I will add code, maybe it's more clear this way – Insomnia88 Feb 18 '22 at 13:27

1 Answers1

0

You can achieve the same using display: grid

.list-tile {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 20px;
  grid-template-areas: "image image header" "image image content";
  grid-gap: 1em;
}

h2 {
  grid-area: header;
}

img {
  grid-area: image;
}

p {
  grid-area: content;
}

@media (max-width:767px) {
  .list-tile {
    grid-template-areas: "header" "image" "content";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
}
<div class="list-tile">
  <img src="https://via.placeholder.com/400x200" alt="image" />
  <h2>Heading2</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies odio eu elit pharetra, blandit elementum nunc tristique. Curabitur quis ullamcorper felis.</p>
</div>
Master.Deep
  • 792
  • 5
  • 20