0

I really need help with padding not applied for modal top up as well as hidden. The problem is in the end of the code. This pop up div is not in the centre. It is also very small, the padding is not applied and visible by default, even though, I used hidden tag. I suspect it is because I used flex, however I can not fix it, no matter what I do. I add a screenshot how does it look. Any help would be highly appreciated!

padding is not applied, as well as hidden

<!doctype html>
<html>
  <!-- Tutorials followed:
   https://www.youtube.com/watch?v=wTuu30kyk4c - add custom fonts
   https://www.youtube.com/watch?v=Kh3xj-5nMqw - initiate the project
   https://dev.to/dailydevtips1/tailwind-css-full-screen-video-header-5539 - background video
  -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./output.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap"
        rel="stylesheet">
    <script type="module" src="./scripts/signInPopUp.js"></script>    
    <title>Price Sentinel</title>

</head>

<body class="relative min-h-screen overflow-hidden flex flex-col items-center justify-center space-y-24">
  <!-- Background video -->
  <video autoplay muted loop playsinline class="fixed top-0 left-0 w-full h-full object-cover z-0">
    <source src="./videos/main-abstract.mp4" type="video/mp4">
  </video>

  <!-- Header-->
   <div class="absolute top-0 left-0 w-full p-6 flex justify-end">
    <button id="openSignInButton" class="text-white backdrop-blur-xl px-7 py-3 font-bodoni italic text-3xl hover:opacity-70 rounded-xl">
      Sign In
    </button>
    </div>

  <!-- Centre logo and text-->
  <h1 class="relative text-[8rem] font-bodoni text-white italic text-center z-10">
    Price Sentinel
  </h1>
  <h2 class="relative text-2xl text-white font-bodoni italic text-center -mt-16 z-10">
    Track prices of desired products
  </h2>

  <!-- Centered input field -->
  <div class="text-3xl italic backdrop-blur-xl max-w-4xl p-4 rounded-full z-10">
    <div class="flex items-center w-full bg-white/80 rounded-full">
      <button href="main.html" class="flex items-center justify-center w-16 h-16 rounded-full bg-white m-5 hover:bg-gray-100 shrink-0">
  <img src="./icons/search-icon.svg" alt="Search icon" class="w-7 h-7">
      </button>
      <input
        class="flex-grow font-bodoni text-black h-16 px-7 bg-white rounded-full placeholder:italic placeholder:text-black focus:outline-none focus:ring-2 focus:ring-[#001352]/50 hover:bg-gray-50"
        type="text" placeholder="Link to the product...">
       <div class="rounded-full p-4">
        </div>
    </div>
  </div>
  <!-- Sign In Blur -->
   <div id="signInBlur" class="fixed top-0 left-0 w-full h-full -z-10 backdrop-blur-xl">
   </div>

   <!-- Sign In Pop Up -->
   <div id="signInPopUp" class="absolute top-1/2 bg-white p-20 hidden">
    <h1>Sign In</h1>
   </div>

</body>

</html>```


I tried applying hidden on header and it worked. Anywhere else it doesn't work.
Improve this question
1
  • 1
    Please provide a proper minimal reproducible example of the issue. (We don't have your ./output.css and ./scripts/signInPopUp.js, so we don't know what those contain / do.) Commented Oct 9 at 10:51

1 Answer 1

Reset to default
1

The source of the problem is that you're using the body as a flex container, which has led to inconsistent behavior. In a flex layout, the children's heights - including the button's - stretch to fill the entire space.

And with those strange fixed/absolute positionings, you're trying to hide the properties of the flex parent. It's bizarre. Don't use the body as a flex layout, and don't try to break out of flex - keep your code consistent.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<body>
  <div class="relative min-h-screen overflow-hidden">
    <!-- Background video -->
    <video autoplay muted loop playsinline class="fixed top-0 left-0 w-full h-full object-cover z-0 bg-black">
      <source src="./videos/main-abstract.mp4" type="video/mp4">
    </video>

    <!-- Header-->
    <div class="absolute top-0 left-0 w-full p-6 flex justify-end">
      <button id="openSignInButton" class="text-white backdrop-blur-xl px-7 py-3 font-bodoni italic text-3xl hover:opacity-70 rounded-xl">
        Sign In
      </button>
    </div>
    
    <div class="flex flex-col items-center justify-center">
      <!-- Centre logo and text-->
      <h1 class="relative text-[8rem] font-bodoni text-white italic text-center z-10">
        Price Sentinel
      </h1>
      <h2 class="relative text-2xl text-white font-bodoni italic text-center -mt-16 z-10">
        Track prices of desired products
      </h2>

      <!-- Centered input field -->
      <div class="text-3xl italic backdrop-blur-xl max-w-4xl p-4 rounded-full z-10">
        <div class="flex items-center w-full bg-white/80 rounded-full">
          <button href="main.html" class="flex items-center justify-center w-16 h-16 rounded-full bg-white m-5 hover:bg-gray-100 shrink-0">
            <img src="./icons/search-icon.svg" alt="Search icon" class="w-7 h-7">
          </button>
          <input
            class="flex-grow font-bodoni text-black h-16 px-7 bg-white rounded-full placeholder:italic placeholder:text-black focus:outline-none focus:ring-2 focus:ring-[#001352]/50 hover:bg-gray-50"
            type="text" placeholder="Link to the product..."
          >
          <div class="rounded-full p-4"></div>
        </div>
      </div>
    </div>
  
    <!-- Sign In Blur -->
    <div id="signInBlur" class="fixed top-0 left-0 w-full h-full -z-10 backdrop-blur-xl"></div>

    <!-- Sign In Pop Up -->
    <div id="signInPopUp" class="absolute top-1/2 bg-white p-20 hidden">
      <h1>Sign In</h1>
    </div>
  </div>
</body>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Everything is working! Thank you so much for clarifying the issue for me!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.