Having elements both next to and under using the display grid css property

user_13179538 0
Viewed 33

I m working on a little website. The problem I am facing is that the text below the h2 heading is not appearing under it, while also still being next to the image, but right next to the heading on the same line, although I used the flex-grow:1 css property for the h2 heading to take up the remaining space. The mentioned h2 heading although, as expected appears next to the image.

<div class="container">
    <div class="portfolio-sidebar"> ´

        </div>
        <div class="main">
            <img class="left-img" height="150" src="images/iconmonstr-paper-plane-1.svg" alt="Mail Icon">
            <h2 class="page-heading">Kontakt</h2>
            <p>Sometext</p>
            <a href="mailto:mailhere">somemailhere@mail.com</a>
                
        </div>
        
    </div>

This is the stylesheet css:

.container {
    display:grid;
    grid-template-columns: 250px 3fr;
    grid-template-rows: 87vh;
}

.main {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    border-top: 2px transparent solid;
    border-left: 2px transparent solid;
    border-bottom: 2px transparent solid;
    border-top-left-radius: 10%;
    border-bottom-left-radius: 5%;;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(138,129,129,1) 50%, rgba(154,131,98,1) 100%);
    font-weight: bold;
    font-size: 20px;
    color:white;
} 

.page-heading {
flex-grow: 1;
text-align: center;
}

Thanks for any help!

css-grid css
1 Answers

display: flex by default has flex-direction: row, which means all children appear in one line. you can use the below code to fix your issue.


    .container {
      display: grid;
      grid-template-columns: 250px 3fr;
      grid-template-rows: 87vh;
      height:50vh;
    }

    .main {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column; /*this line make your elements in one column*/
      border-top: 2px transparent solid;
      border-left: 2px transparent solid;
      border-bottom: 2px transparent solid;
      border-top-left-radius: 10%;
      border-bottom-left-radius: 5%;
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(138, 129, 129, 1) 50%,
        rgba(154, 131, 98, 1) 100%
      );
      font-weight: bold;
      font-size: 20px;
      color: white;
    }

    .wrapper {
      display: flex;
    }

    .page-heading {
      flex-grow: 1;
      text-align: center;
    }


    <div class="container">
          <div class="portfolio-sidebar">´</div>
          <div class="main">
            <div class="wrapper">
              <img
                class="left-img"
                height="150"
                src="https://images.unsplash.com/photo-1639921769902-158d63270f34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
                alt="Mail Icon"
              />
              <h2 class="page-heading">Kontakt</h2>
            </div>
            <p>Sometext</p>
            <a href="mailto:mailhere">somemailhere@mail.com</a>
          </div>
        </div>

.wrapper element keep your image and header in one line.

For more information about flex-direction you can read this.

user_110804850
Related