So, I'm having this fiddle
I'm trying to keep both containers aligned horizontally. In this example, they are, but if the String asd(line 4) is deleted, the left content seems to get a little bit of padding top and I don't understand why.
So, I want to have both contents aligned, without the String asd.
Check Code Below
HTML
<div class="row">
<div class="col s12 m8">
<div class="leftContent white ">
<div id="profile-page-header" class="card leftContent">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="http://static.vecteezy.com/system/resources/previews/000/096/846/original/treasure-hunter-flat-icons-vector.jpg" alt="user background">
<span class="card-title"><i class="material-icons right">more_vert</i></span>
</div>
<figure class="card-profile-image">
<img src="https://s3.amazonaws.com/37assets/svn/1065-IMG_2529.jpg" alt="profile image" class="circle z-depth-2 responsive-imgMod activator">
</figure>
<div class="card-content">
<br>
<div class="row">
<div class="col s3">Level: 5</div>
<div class="col s3 offset-s6">Rank: Master</div>
</div>
</div>
</div>
</div>
</div>
<div class="col s12 m4">
<div>
<div class="white rigthContent">
<div class="containerMod">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s1">
<a class="blue-text"href="#following">Urmariti</a>
</li>
<li class="tab col s1">
<a class="blue-text" href="#followers" onclick="showFollowers()">Urmaritori</a>
</li>
</ul>
</div>
<br>
<div class="col s12 ">
<br/>
<div class="containerMod" id="following"></div>
</div>
<div class="col s12 ">
<div class="containerMod" id="followers"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.white{margin: 0.5rem 0 1rem 0;}
.leftContent{
border-radius: 0.5em !important;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05) !important;
-moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05) !important;
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05) !important;
margin-bottom: 1.5rem !important;
/* min-height: 35rem; */
}
.responsive-imgMod{
height: 150px;
width: 150px;
}
#profile-page-header .card-image {
height: 200px;
}
#profile-page-header .card-profile-image img {
position: absolute;
z-index: 1;
left: 0;
right: 0;
top:110px;
bottom: 0;
margin-left: auto;
margin-right:auto
}
Does anyone have any idea?
the solution
Add this to your CSS:
.card {
margin:0;
}
Or, what would be better if you want only this card to be affected;
Add an ID tag to the card you want to alter, and use that ID tag in your CSS to take away the card's margin.
updated script