Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Broken valign-wrapper with row class.

See original GitHub issue

I’m trying to use the valign-wrapper inside a row, but for some reason, the row/column functionality becomes broken when the wrapper is introduced. Any insight?

Sample Code:

<div class="container">
    <h1>Without valign</h1><br>
    <div class="row">
        <div class="col s12 m4 l4">
            <img src="images/profile_images/face.png" class="responsive-img">
        </div>
        <div class="col s12 m8 l8 left-align ">
            <img class="valign" src="images/other_images/email_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="mailto:email@email.com">email@email.com</a><br>
            <img class="valign" src="images/other_images/phone_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="tel:1-888-555-1234">+1 (888) 555-1234</a>
        </div>
    </div>

    <h1>With valign</h1><br>
    <div class="row valign-wrapper">
        <div class="col s12 m4 l4 valign">
            <img src="images/profile_images/face.png" class="responsive-img">
        </div>
        <div class="col s12 m8 l8 left-align valign">
            <img class="valign" src="images/other_images/email_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="mailto:email@email.com">email@email.com</a><br>
            <img class="valign" src="images/other_images/phone_icon.png" height="30" width="30">
            <a class="blue-link-no-padding" href="tel:1-888-555-1234">+1 (888) 555-1234</a>
        </div>
    </div>
</div>

Desktop: screen shot 2016-04-04 at 1 04 18 pm

Mobile: screen shot 2016-04-04 at 1 04 50 pm copy

Issue Analytics

State:
Created 7 years ago
Reactions:3
Comments:7 (1 by maintainers)

Top GitHub Comments

9reactions

alexsalescommented, Jul 20, 2016

@darckyn +1: definitely on the right track and much less verbose.

@bionetmarco: If you don’t want to use Sass, you can just add a css media query at the end of your stylesheet. In your specific sample code, I found that you’ll need to increase the specificity of your selector to get @darckyn’s code to work https://plnkr.co/ByUOUA92GHTelskSvXcs:

@media only screen and (max-width: 600px) { .row.valign-wrapper { display: inherit; } }

0reactions

cirlenocommented, May 13, 2018

I have been looking in this discussion and I learn something which helped me solve a problem in may development, tks for all.

Top Results From Across the Web

MaterializeCSS valing-wrapper responsiveness not working

Rather than dropping to a new line. The reason is that the .valign-wrapper is styled using Flexbox and flex-wrap is not set.

Multiple Solutions to Tricky-But-Should-Be-Simple CSS ...

Method 1: Word-Wrap · Adding word-break: break-word to the parent div · This will break long continuous words/strings when they hit the border...

Helpers - Materialize

Vertical Align. You can easily vertically center things by adding the class valign-wrapper to the container holding the items you want to vertically...

Materialize CSS Flashcards - Quizlet

You can easily vertically center things by adding the class valign-wrapper to the container holding the items you want to vertically align.

How to align two div's horizontally using HTML - GeeksforGeeks

Class and id attributes can be used with these tags. The problem of aligning 2 divs horizontally: Since <div> tag is a block...