htmlcsscustom-error-pages

I have an HTML iframe issue in which I am trying to fix with CSS


i have tried a couple of fixes and even turned to chatGPT-4o (right after i looke on the internet and docs)

I want to get this to be my error page which i redirect from a page i am fixing to ensure the people who use my projects know they are either broken or are being worked on. I primarily do countdowns, but i also do other stuff too! CSS is not my strong suite but i wanted to step out of my comfort zone so i tried it an i am not about to waste the 10+ hours i spent of my life just to go back into my comfort zone and do just html.

my html code hub: https://dateclock.w3spaces.com/hub.html

here is the code:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <div class="page-setup">
    <link rel="icon" href="https://th.bing.com/th/id/OIP.0Z295SNshKyJSCHaQNNjcAHaHa?rs=1&pid=ImgDetMain">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CD ERR PAGE</title>
    <style>
        body { 
            background-color: #ff0000; /* set background color to red */
            text-align: center; /* center the text */
            margin :0; /*remove default margin */
            padding: 0; /* remove default padding*/
        
        }
        .content {
        padding: 20px; /*add padding to create space around content */
        box-sizing: border-box; /*include padding in width calculation */
        }
        h1 {
            font-size: 24px; /* Adjust as needed */
            color: white; /* Customize the color */
        }
        p {
            font-size: 16px; /* Adjust as needed */
            color: white; /* cusomize as needed */
        }
        footer{
        position: relative; /* Ensure footer content is contained */
        width: 100%; /* Full width */
        height: 50px; /* set fixed height for iframe container */
        overflow: hidden; /* Hide any overflow */
        
    }
    .iframe-container {
    width: 730px; /* occupy full width of container*/
    max-width: 100%; /* set limit for width */
    height: 500px; /* set height for iframe content */
    border: 3px solid white; /* add a 3px solid white border */
    display: flex;
    justify-content: center; /* center the iframe content */
    align-items: center; /* ensure the content is centered */
    }
    iframe {
    display: block;
    width: 100%; /*  width of footer */
    height: 100%; /* full height of footer*/
    border: none;
    }
    </style>
    </div>
</head>
<body>
    <div class="content">
    <h1>Sorry, this countdown is currently broken or is being worked on.</h1>
    <p><b>You can check out my <a href="https://dateclock.w3spaces.com/hub.html" target="_blank">HTML hub</a>.</b></p>
    <p><b>This issue will be resolved shortly.</b></p>
    </div>
    <footer>
        <div class="iframe-container">
        <iframe src="https://cdn.dribbble.com/users/1120320/screenshots/3898259/error.gif"></iframe>
        </div>
    </footer>
</body>
</html>

Solution

  • Why did you use Iframe and place it in footer? I don't know, but here is solution:

     body { 
          background-color: #ff0000; /* set background color to red */
          text-align: center; /* center the text */
          margin :0; /*remove default margin */
          padding: 0; /* remove default padding*/
          }
    .content {
           display: flex;
           flex-direction: column;
           align-items:center;
           box-sizing: border-box; /*include padding in width calculation */
    }
    h1 {
       font-size: 24px; /* Adjust as needed */
    }
    p {
      font-size: 16px; 
    }
    p,h1{
      color: white; 
    }
    .pic-container {
        width: 730px; /* occupy full width of container*/
        max-width: 100%; /* set limit for width */
        height: 500px; /* set height for iframe content */
        border: 3px solid white; /* add a 3px solid white border */
        display: flex;
        justify-content: center; /* center the iframe content */
        align-items: center; /* ensure the content is centered */
        }
    #MyPicture{
        width: 100%; /*  width of footer */
        height: 100%; /* full height of footer*/
        background-image:url("https://cdn.dribbble.com/users/1120320/screenshots/3898259/error.gif");
        border: none;
    }
    <div class="content">
        <h1>Sorry, this countdown is currently broken or is being worked on.</h1>
        <p><b>You can check out my <a href="https://dateclock.w3spaces.com/hub.html" target="_blank">HTML      hub</a>.</b></p>
        <p><b>This issue will be resolved shortly.</b></p>
       <div class="pic-container">
              <div id="MyPicture"></div>
       </div>
    </div>