CODEWITHSUNDEEP
htmlcssframeworks
ahto design
ahto design

Reputation: 85

changing spaces between rows in Skeleton Framework.

Right now I have two divs using "one-half columns" class.

As you can see here, the bottom card on the left side is still aligned with the one on the bottom right. enter image description here

I want Pinterest kind of style like this, but I do not know how because they are in different rows.enter image description here

here is my html code.

<div class="container">
<div class="row">
  <div id="cards" class="one-half column" style="margin-top: 25%">
    <img class="card-image" src="img/sample.png">
    <div class="title">
    <h4>Stealth Rats</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p>
    </div>
  </div>
   <div id="cards" class="one-half column" style="margin-top: 25%">
    <img class="card-image" src="img/sample.png">
    <div class="title">
    <h4>Basic Page</h4>
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p>
    </div>
  </div>
</div>

<div class="row">
  <div id="cards" class="one-half column" style="margin-top: 5%">
  <img class="card-image" src="img/sample.png">
    <h4>Basic Page</h4>
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
  </div>
   <div id="cards" class="one-half column" style="margin-top: 5%">
   <img class="card-image" src="img/sample.png">
    <h4>Basic Page</h4>
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
  </div>

Thanks in advance!

Upvotes: 0

Views: 454

Answers (1)

Paulo Arromba
Paulo Arromba

Reputation: 108

You can't do it in plain css unless you work with columns instead of rows (and that breaks content importance).

What you want is Masonry or another javascript alternative.

Also, your html has errors, you cannot use the same id more than once. Change it to class='cards' and if you want to use masonry you have to put every card inside the same div, so in this case, inside the same row.

Then you can call it

$('.row').masonry({
  itemSelector: '.cards',
  columnWidth: 200 //this is an example.
});

Since masonry is responsive, you can forget about skeleton for this part.

Upvotes: 1

Related Questions