CODEWITHSUNDEEP
htmlcssmedia-queries
daydreamnation1011
daydreamnation1011

Reputation: 33

I am having an issue with this media query. My <h2> is disappearing behind my containers when I shrink my browser window

<section class="blog">
        <h2>Blog</h2>
            <div class="wrapper">
                <div class="container">
                    <div class="sub-container">
                        <div class="top-sub-container">
                            <div class="box-box-1">
                                <img src="./assets/image-2.jpg" />
                                <div class="box-text">
                                    <p>Date</p>
                                    <h3>Blog</h3>
                                        <p>Lorem ipsum dolor.</p>
                                            <button class="button">Read More</button>
                            </div>
                        </div>
                        <div class="box-box-2">
                            <img src="./assets/image-3.jpg" />
                                <div class="box-text">
                                    <p>Date</p>
                                    <h3>Blog</h3>
                                        <p>Lorem ipsum dolor.</p>
                                            <button class="button">Read More</button>
                            </div>
                        </div>
                    </div>
                    <div class="box-box-3">
                        <img src="./assets/image-5.jpg" />
                            <div class="box-text">
                                <p>Date</p>
                                <h3>Blog</h3>
                                    <p>Lorem ipsum</p>
                                        <button class="button">Read More</button>
                            </div>
                    </div>
            </div>
                <div class="box-box-4">
                    <img src="./assets/image-4.jpg" />
                    <div class="box-text4">
                        <h3>About me</h3>
                            <p>Lorem ipsum</p>
                    </div>
                </div>
    </div>
</section>

And here is my CSS

.wrapper {
        width: 90%;
        display: flex;
        flex-direction: column;
    }


    .blog {       
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 100px;
    }


    h2 {
        text-align: center;
        line-height: 5rem;
        z-index:1;
    }

    header {
        margin-bottom: 50px;
    }
    
    .blog {
        margin-top: 250px;
    }


    .container {
        width: 100%;
        height: auto;
        margin-top: 165rem;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }

    .sub-container {
        margin: 0;
        height: auto;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        padding: 0;

    }

    .top-sub-container {
        margin: 0;
        padding: 0;
    }

    .box-box-1 > img {
        margin: 0;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        
    }

    .box-text > p {
        width: 100%;
        font-size: 1.1rem;
    }

    .box-box-2 > img {
        margin-top: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .box-box-3 > img {
        margin-top: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .box-box-4 {
        display: flex;
        width: 100%;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .box-box-4 > img {
        margin: 0;
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    
    }

I have tried adding margin and padding but it keeps disappearing behind the container. How do I move it up so that it sits write above the container instead of hiding behind it???

I have tried adding margin-top but it still will not work!

Edit: I've added more CSS but StackOverflow is saying that I need to provide more details. The following is filler text so I can make this post: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Upvotes: 0

Views: 93

Answers (2)

DevWebTk
DevWebTk

Reputation: 180

It May Helps You

h2{
    margin: 40px 0px;
    text-align:center;
}


.container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}
.sub-container{
    display:flex;
    justify-content: space-between;
    
}
<h2>Blog</h2>
<div class="wrapper">
    <div class="container">
        <div class="sub-container">
            <div class="box-box">
                <img src="https://via.placeholder.com/100" />
                <div class="box-text">
                    <p>Date</p>
                    <h3>Blog Post</h3>
                    <p>Lorem ipsum</p>
                    <button class="button">Read More</button>
                </div>
            </div>
            <div class="box-box">
                <img src="https://via.placeholder.com/100" />
                <div class="box-text">
                    <p>Date</p>
                    <h3>Blog Post</h3>
                    <p>Lorem ipsum.</p>
                    <button class="button">Read More</button>
                </div>
            </div>
            <div class="box-box">
                <img src="https://via.placeholder.com/100" />
                <div class="box-text">
                    <p>Date</p>
                    <h3>Blog Post</h3>
                    <p>Lorem ipsum dolor sit </p>
                    <button class="button">Read More</button>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Mehrwarz
Mehrwarz

Reputation: 499

Add z-index to you CSS.

.container {
    width: 100%;
    height: auto;
    margin-top: 1.65rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}

h2{
    z-index:1;
}

Upvotes: 0

Related Questions