HTML, dynamic NFTs preview


recently i created a new dynamic NFT and i notice that on the claim page my NFT has an annoying white border even i checked my last drops which i used the same HTML code also has this problem.
you can check it here

i would be really glad if you can fix this problem or help me to update the HTML code so i dont have this problem thank you very much LFG!

You need to clear the browser’s default styling. The white border is coming from margin set on the body tag.

Set this css in your html’s <head> tag.

html, body {
  margin: 0;
  padding: 0;

After making the change load the file locally in your browser and verify it works before doing another transaction.

gm fren, thank you so much for ur reply i updated the HTML but in the browser it work good but i cant test it on manifold claim page. i notice that there is no option to test claim page on test network :frowning:

i use chat-gpt to create the HTML code i have no idea about the coding :))) but i added the those on the HTML and it seems that work good on browser just need to test it on claim page

<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Day and Night Image Switcher</title>
      html, body {
        margin: 0;
        padding: 0;
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
      .artwork-container {
        position: relative;
        width: 100%;
        height: 100%;
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 1s ease;
        cursor: pointer;
        max-width: 100%;
        max-height: 100%;
    <div class="artwork-container">
      <img id="dayImage" src="" alt="Day image">
      <img id="nightImage" src="" alt="Night image">
      const dayImage = document.getElementById('dayImage');
      const nightImage = document.getElementById('nightImage');
      const currentHour = new Date().getHours();
      let currentImage = currentHour >= 6 && currentHour < 18 ? 'day' : 'night';
      function switchImage() {
        if (currentImage === 'day') {
 = 0;
 = 1;
          currentImage = 'night';
        } else {
 = 0;
 = 1;
          currentImage = 'day';
      if (currentImage === 'day') { = 1;
      } else { = 1;
      dayImage.addEventListener('click', switchImage);
      nightImage.addEventListener('click', switchImage);

this is my updated code. its just suppose to change every 12h beetwen the two artworks and then wen user click on the artwork it changes. but i just wanted to be like the normal artworks wen i open the claim page

Late to respond but looks like you sorted it out. Looks great.