Kevin Powell - Community•13mo ago

Phone overlap on a container

I have a figma design which is in the cover, and I want it to code using html and css, the problem is, I cant execute it properly using position absolute, I can position it in my desire look but I cant make it stay on that position, and second its not responsive. Sorry in adv Im using variables on other css properties. Any one can help me figure out how to execute this properly? Heres the HMTL:

 <section class="cta-section">
        <!-- Phone Container -->
        <div class="phone-container">
            <img src="../assets/phone.png" alt="phone-image">
        </div>

        <!-- Information / buttons -->
        <div class="cta-information">
            <div class="text-section">
                <h1 class="primary-title">Choose your course now</h1>
                <p class="secondary-p">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt quia perferendis adipisci at, nihil veniam!</p>
                <div class="cta-buttons">
                    <button><a href="#">Get started</a></button>
                    <button><a href="#">Sign up</a></button>
                </div>
            </div>
        </div>
    </section>


**AND HERE'S THE CSS**

 .cta-section{
    max-width: var(--desktop-max-width);
    min-height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap:15px ;
    box-shadow: 0rem 0.9375rem 1.875rem rgba(29, 29, 29, 0.4);
    background: rgb(217, 217, 217);
    background: linear-gradient(151deg, rgba(217, 217, 217, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    outline: 1px solid var(--dark-outline-color);
    border-radius: 12px;
   }
   .phone-container{
    position: relative;
   }
   .phone-container img{
    position: absolute;
    top: -240px;
    left: -100px;

   }

 <section class="cta-section">
        <!-- Phone Container -->
        <div class="phone-container">
            <img src="../assets/phone.png" alt="phone-image">
        </div>

        <!-- Information / buttons -->
        <div class="cta-information">
            <div class="text-section">
                <h1 class="primary-title">Choose your course now</h1>
                <p class="secondary-p">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt quia perferendis adipisci at, nihil veniam!</p>
                <div class="cta-buttons">
                    <button><a href="#">Get started</a></button>
                    <button><a href="#">Sign up</a></button>
                </div>
            </div>
        </div>
    </section>


**AND HERE'S THE CSS**

 .cta-section{
    max-width: var(--desktop-max-width);
    min-height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    gap:15px ;
    box-shadow: 0rem 0.9375rem 1.875rem rgba(29, 29, 29, 0.4);
    background: rgb(217, 217, 217);
    background: linear-gradient(151deg, rgba(217, 217, 217, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    outline: 1px solid var(--dark-outline-color);
    border-radius: 12px;
   }
   .phone-container{
    position: relative;
   }
   .phone-container img{
    position: absolute;
    top: -240px;
    left: -100px;

   }

2 Replies

clevermissfox•13mo ago

Maybe try using grid? Then the item that’s position absolute will be relative to its own cell There’s a YouTube video that may help with your goal, let me see if I can find it . Putting it in a codepen so we can see all of the code and what the variables are doing would help too. From your description I’m not sure what it IS doing other than not doing what you want it to .

clevermissfox•13mo ago

https://youtu.be/H04P5YXVssE?si=cYjd0o24kv3Zgrka

Kevin Powell

YouTube

Position absolute and responsive layouts

🎓 - I have a free course on conquering responsive layouts: https://courses.kevinpowell.co/conquering-responsive-layouts A lot of people struggle with responsive layouts, and even more so when they use position: absolute. In this video I'm looking at how we can work with position absolute in a responsive way 🙂. 🔗 Links ✅ The Frontend Mentor pro...

Gaming

Programming

Phone overlap on a container