CODEWITHSUNDEEP
htmlcssmaterialize
Frostless
Frostless

Reputation: 848

How to vertically align one column in a two-column grid system(materialize)

I am designing a two-column layout, where some texts sit on the left column and a big img sits on the right. I use col s12 l6 so that on a smaller screen these two would stack together.

I want the left text to be vertically aligned in a large screen but perform normally in a smaller screen. I am using Materialize.

<div class = "container">
    <div class = "row" style="border:solid">
        <div class = "col s12 l6" style="border:solid">
            <p>I want to vertically align in my parent container in big screen,but perform normally when in small screen</p>
       </div>
    <div class = "col s12 l6" style="border:solid">
        <img src="https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg" ></img>
    </div>
</div>

I want in big Screen: big screen I want in small screen: small creen

I am the example link

Upvotes: 1

Views: 761

Answers (1)

Chris Bradshaw
Chris Bradshaw

Reputation: 270

Solution (Flexbox)

HTML

<div class = "container">
    <div class = "row Aligner" style="border:solid">
        <div class="row Aligner-item--top"></div>
        <div class = "col s12 l6  Aligner-item" style="border:solid">
            <p>I want to vertically align in my parent container in big screen,but perform normally when in small screen</p>
       </div>
       <div class="row Aligner-item--bottom"></div>
    <div class = "col s12 l6" style="border:solid">
        <img src="https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg" ></img>
    </div>
</div>

CSS

@media only screen and (min-width: 900px) {
.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Aligner-item--top {
  align-self: flex-start;
}

.Aligner-item--bottom {
  align-self: flex-end;
}
}

Codepen: https://codepen.io/chrisbradshaw/pen/XYOdXL

  1. Add a div with the class of "row Aligner-item--top" above and class "Aligner-item--bottom" below the target div.
  2. Add class "Aligner" to parent div.
  3. Set "Aligner" class to display:flex, align-items: center, and justify-content: center in CSS.
  4. Add "align-self: flex-start;" to top div and "align-self: flex-bottom;" to bottom div.
  5. Add media query so that this behavior is only implements on Viewports below 900px.

Original Solution (not optimal, "hard coding" margin-top):

CSS

@media only screen and (min-width: 900px) {
  .v-align {
    margin-top: 10vh;
  }
}

Updated codepen: https://codepen.io/chrisbradshaw/pen/bKzNMR

  1. I added class "v-align" on the div containing the paragraph and applied margin-top of 10vh in the CSS to vertically center the text. You could also experiment with CSS Flexbox to get this more precise.

  2. Based on feedback from Manoj Kumar, I added media query to the .v-align margin-top so that it would only be applied on Viewports larger than 900px. You can experiment with this to get it perfect.

Upvotes: 2

Related Questions