Why distance between link and grid of images is decreased by any click ?

Hello,

With jquery I have “Load more” link which is implemented with code like :

  <div id="div_nominated_photos_container"
  style="margin: 10px !important; WWborder: 3px dotted red !important; ">
  </div>


  <div style="margin: 10px !important; " id="div_add_new_photos">
  <a onclick="javascript:loadNominatedPhotos(true)" class="nomination-new__btn-more "
  style="cursor: pointer;">
  <svg class="nomination-new__arr-down">
  <use xlink:href="/img/sprite.svg#arr-down"></use>
  </svg>
  Ещё фото
  </a>
  </div>


  function loadNominatedPhotos(load_next_page) {
  if (load_next_page) {
  current_page++
  }

  var current_nomination_id = <?php echo e($currentNomination->id ?? ''); ?>


  $.ajax({
  type: "GET",
  dataType: "json",
  url: '/get_nominated_photos/' + current_nomination_id + "/" + current_page, //  public function get_nominated_photos($nomination_id, $current_page= 1)

  success: function (response) {
  if (current_page === 1) {
  $("#div_nominated_photos_container").html(response.html);
  }
  if (current_page > 1) {
  $(".main_gallery__block:last").after(response.html);
  }

  if (response.rows_uploaded_count >= response.nominated_photos_total_count) {
  $("#div_add_new_photos").css('display', 'none');
  } else {

  $("#div_add_new_photos").css('display', 'block');
  //  $($(".para")[1]).css({"color":"yellow"});
  $("#div_add_new_photos").css('margin-top', '10px !important;'); //padding-top: 10px !important;
  }

  },
  error: function (error) {
  console.error(error)
  }
  });

  }

HTML:

adding more content work ok. but I have a problem
that clicking on “Ещё фото” link distance between this link and grid of images is decreased by any click :
https://prnt.sc/26f1cye

Live at:
http://photographers.my-demo-apps.tk/nomination

When 15 rows are loaded then on “Ещё фото” link is hidden at all, as all data are retrieved.

I tried to set margins in content div design or programatically but failed.

How that can be fixed ?

Thanks!

 

You know all those things I'm always ranting and raving about that "upsets" people? The stuff that some say "well what's wrong with that?"

WELCOME TO WHY I SAY IT.

Even diagnosing the simplest of your issues here is difficult thanks to your gibberish markup, pissing inlined style into the markup, endless pointless DIV for nothing, sleazing classes at everything instead of leveraging semantics... just the fact you're throwing !important all over the place is reason enough to throw it all in the trash and start over.

And that's BEFORE we talk the mental-huffing-midgetry of jQuery, the garbage use of pixel metrics in the stylesheet, the mismatch of metrics...

You've got row DIV doing flex-wrap's job, fixed layout making turning it responsive harder... I mean Christmas on a cracker you're blowing 7k of markup on a header, three images, and not even a quarter k of plaintext/links. Not even 1.5k's job!


No offense, but learn HTML. Because what you have is proof you shouldn't be playing with CSS or JS yet. Thought that might explain your diving for the scam artist predatory BS that is jQuery.