'How to center two left rows vertically in grid?

I'm using grid to achieve this design (desktop is 1st image, mobile is 2nd image): Desktop Design Mobile Design

Problem is, the two left div text isn't divided evenly so the text is skewed to the top, rather than dynamically in the center. Tried using flex, but it doesn't work because of the mobile design.

htmlcss


Solution 1:[1]

You have multiple opportunities to achieve this. I think using grid system is quite good idea. But if you like simple solution you can use media queries.

.flex {
  display: flex;
  justify-content: center;  
  gap: 10%;
}

.txt {
  display: flex;
  justify-content: center;  
  align-items: center;  
  flex-direction: column;  
}

.mobile {
  display: none;
}
.desktop {
  display: flex;
}

@media (max-width: 60rem) { 
  .mobile {
    display: block;
  }
  .desktop {
    display: none;
  }
}
<main class="flex">
  <div class="txt desktop">
    <h1 class="main-title">Main title</h1>
    <h2 class="subtitle">Subtitle</h2>
  </div>
  
  <div>
  <h1 class="main-title mobile">Main title</h1>  
  <img src="https://via.placeholder.com/200x300"
  class="hero-image">
  <h2 class="subtitle mobile">Subtitle</h2>
  </div>
</main>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Max Pattern

Related Questions