javascripthtmlcss

Adding vertical space between html elements (divs) within the same container

(Edit: as after applying the below solution I'm now able to have spaces between feed blocks on desktop view but it didn't worked on mobile view)

I have the following code and it works well by shuffling the elements within the container but the problem is that the content blocks show up close to each other with no vertical space between them.

I tried to add many tags like p and br between them to get the desired space but it caused a non arranged space so some blocks got the space and some not and sometimes it stops the shuffling at all.

So I need some way to add space between all div elements while keeping the shuffling function on.

  // Function to shuffle the order of elements within a container
  function shuffleElements(container) {
    var elements = container.children;
    for (var i = elements.length; i >= 0; i--) {
      container.appendChild(elements[Math.random() * i | 0]);
    
    }
  }

  // Wait for the page to fully load before shuffling the elements
  window.addEventListener('load', function() {
    var container = document.getElementById('your-container-id'); // Replace 'your-container-id' with the ID of the container div that holds the RSS feed divs
    shuffleElements(container);

  });
<div id="your-container-id">

<div class="fb-page" data-href="https://www.facebook.com/saudioffers6" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false">
<blockquote cite="https://www.facebook.com/saudioffers6" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/saudioffers6">‏عروض السعودية  saudi offers‏</a></blockquote>
</div>

<div class="fb-page" data-href="https://www.facebook.com/diyprocom" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/diyprocom" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/diyprocom">‏‎Diy pro‎‏</a></blockquote></div>

<div class="fb-page" data-href="https://www.facebook.com/MarinaFish2019" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/MarinaFish2019" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/MarinaFish2019">‏مارينا للأسماك والرخويات‏</a></blockquote></div>

<div class="fb-page" data-href="https://www.facebook.com/nursery.libya" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="false" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/nursery.libya" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/nursery.libya">‏مشتل تمنهنت‏</a></blockquote></div>
</div>

Solution

  • You can add some styles to add vertical space between elements. Basically you may want to add some padding or margin at the bottom of each children of #your-container-id except to the last one.

    To achieve this you can try the following code:

    <style>
    #your-container-id > *:not(:last-child) {
        margin-bottom: 50px; /* change this with the value you want */
    }
</style>