position relative issue with a carousel.

Question

User1575078971 posted

I have a slider which is functioning properly But It is floating above all page 

Click the link to better understand 

http://wowkitchenplace.in/Pressure-Monitor.html

Desired result

https://medik.wpengine.com/pressure-monitor-demo/

code

 <section id="bp-section">
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="https://picsum.photos/900/700?random=1" alt="First slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="https://picsum.photos/900/700?random=2" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="https://picsum.photos/900/700?random=3" alt="Third slide">
                </div>
            </div>
            <div class="text">
                <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident, laborum.</h1>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus laboriosam, dicta maiores ipsum
                    dolore culpa facilis reprehenderit quam autem error nam quia animi assumenda aut debitis quibusdam
                    labore! Perspiciatis modi provident quae sed nulla, doloribus asperiores alias? Eligendi
                    consequuntur odit, harum reprehenderit commodi ipsa, qui maiores dolor at, voluptates assumenda.</p>
            </div>
        </div>
    </section>

CSS

#bp-section {
     ;
     padding: 0; 
     margin: 0;
     box-sizing: border-box;
 }


 #carouselExampleSlidesOnly {
     ;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 100%;
     height: max(80%, 800px);
     overflow: hidden;
 }

 .carousel-inner {
     height: max(80%, 800px);
 }

 .carousel-item {
     height: max(80%, 800px);
 }

 .carousel-item img {
     height: max(80%, 800px);
     width: 100%;
     object-fit: cover;
 }

 .text {
     ;
     top: 0;
     right: 0;
     width: 35%;
     height: 100%;
     background-color: rgba(255, 255, 255, 0.8);
     padding: 20px;
 }

 .text h1 {
     font-size: 2em;
 }

 .text p {
     margin-top: 2em;
     line-height: 2em;
     font-size: 1em;
 }

Please don't just edit the code please explain it to me what I am doing wrong.

Thank you!!

Answer 1

User-1330468790 posted

Hi harshamrita,

 

Could you please confirm whether your problem is about slider partially display or not?

From your codes, I could see that the top half part of the picture and the text are rendered exceeding the top of screen.

 

The reason is that the css property "top:50%" does not work so that the "carouselExampleSlidesOnly" area is moved upwards for 50% of its height.

When you use property top on an element, the parent of that element needs to have a static height set in place. This should be in px or a unit other than percent. 

 

Therefore, in your case, you could simple add height:1000px and the page should be working as you expect.

<style>
        #bp-section {
            ;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            height: 1000px;
        }


        #carouselExampleSlidesOnly {
            ;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: max(80%, 800px);
            overflow: hidden;
        }

        .carousel-inner {
            height: max(80%, 800px);
        }

        .carousel-item {
            height: max(80%, 800px);
        }

            .carousel-item img {
                height: max(80%, 800px);
                width: 100%;
                object-fit: cover;
            }

        .text {
            ;
            top: 0;
            right: 0;
            width: 35%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 20px;
        }

            .text h1 {
                font-size: 2em;
            }

            .text p {
                margin-top: 2em;
                line-height: 2em;
                font-size: 1em;
            }
    </style>

Before:

After:

Hope this can help you.

Best regards,

Sean