Search code examples
cssmaterial-designmaterialize

Remove bottom padding between rows materialize

I'm having troubles with the paddings between two rows in materializecss

Padding problem

enter image description here

I want to remove the bottom padding. With the next code I was able to remove the left and right one:

<div class="col s12 m5 white no-padding">

    <div class="row center-align white"><a href="acercade.html"><img src="imagenes/IMG BOTONES-01.jpg" class="responsive-img"></a></div>
    <div class="row center-align white"><a href="transparencia.html"><img src="imagenes/IMG BOTONES-02.jpg" class="responsive-img"></a></div>

</div>

But it didnt affect the top or bottom one.

Solution

  • So I put a CSS class with height: 150px !important; and it totally works:

    <div class="white col s12 m4 l2 no-padding">
<div class="no-padding-up-down fix-margin"><a href="acercade.html" class="fix-margin"><img src="imagenes/IMG BOTONES-01.jpg" class="responsive-img image-fit"></a></div>
<div class="no-padding-up-down fix-margin"><a href="acercade.html" class="fix-margin"><img src="imagenes/IMG BOTONES-02.jpg" class="responsive-img image-fit"></a></div>
<div class="no-padding-up-down fix-margin"><a href="acercade.html" class="fix-margin"><img src="imagenes/IMG BOTONES-03.jpg" class="responsive-img image-fit"></a></div>


    .fix-margin {
height: 150px !important;

    }

    Note that I have to use it in the div class without the 'row' and in the <a href=...>