Search code examples
cssresponsive-designfrontendtailwind-cssejs

How to Make an Absolutely Positioned Div Responsive Across Different Screen Sizes?

I'm developing a website and have encountered an issue with making a div that is absolutely positioned responsive across different screen sizes. Here's the context and what I've tried so far:

Problem: I have a header section in my HTML where I've positioned a "call to action" (CTA) div absolutely. This div contains several buttons. While the positioning looks perfect on one specific screen size, it doesn't adjust correctly when I resize the browser window or view it on different devices.

Code Example: Here is the relevant part of my HTML and CSS:

<header class="min-h-[25vh] max-w-full relative">
    <div class="absolute top-[0px] md:top-[-155px] min-h-full">
        <video src="../../../videos/video-accueil.mp4" autoplay muted playsinline loop></video>
    </div>
    <div class="relative">
        <div class="flex flex-col md:flex-row md:space-x-7 items-center space-y-4 justify-around z-20 absolute bottom-[-300px] md:space-y-0 md:bottom-[-380px] left-0 right-0 mx-auto w-fit">
            <!-- Buttons here -->
        </div>
    </div>
</header>

Solution

  • Here is the example base on your code

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive CTA Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="header">
    <div class="background-video">
      <video src="https://file-examples.com/storage/fe4996602366316ffa06467/2017/04/file_example_MP4_1920_18MG.mp4" autoplay muted playsinline loop></video>
    </div>
    <div class="cta-container">
      <div class="cta">
        <button>Button 1</button>
        <button>Button 2</button>
      </div>
    </div>
  </header>

  </body>
</html>

    Adjust Styles as per requirement and screen using below css

    /* Style the header */
.header {
  min-height: 50vh; /* Adjust height as needed */
  position: relative; /* Required for absolute positioning */
}

/* Style the video background */
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Ensure video fills the header */
  overflow: hidden; /* Prevent video overflow */
}

.background-video video {
  width: 100%;
  height: 100%; /* Stretch video to fit container */
  object-fit: cover; /* Preserve aspect ratio (optional) */
}

/* Style the CTA container (optional for centering) */
.cta-container {
  display: flex; /* Make parent container a flexbox (optional) */
  justify-content: center; /* Horizontally center CTA div (optional) */
  position: absolute;
  top: 67%; /* 80% from the top of the header (Adjust this as per needed Important) */
  bottom: 10%; /* 10% from the bottom of the header  (Adjust this as per needed Important) * */
  left: 0;
  right: 0;
  z-index: 2; /* Ensure CTA div is above background video */
}

/* Style the CTA div */
.cta {
  width: fit-content; /** adust if needed */
  height: fit-content; /** adust if needed */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  padding: 1rem; 
  border-radius: 5px; 
  color: #fff; 

}

/* Style CTA buttons (adjust as needed) */
.cta button {
  padding: 0.5rem 1rem;
  border: none;
  color: inherit;
  background-color: #333; /* Adjust button color */
  cursor: pointer;
}

/* Media queries for further adjustments (optional) */
@media (max-width: 768px) {
  .cta {
    /* Adjust styles for smaller screens (if needed) */
  }
}