CODEWITHSUNDEEP
bootstrap-4
K. Pham
K. Pham

Reputation: 47

Image is not within its own row

I haven't had this problem until recently. At normal width, everything works fine where there are two separately even columns and its responsive. Then at a certain breakpoint, instead of the image and text being on its own row, the image overlaps the text. How do set the image to be on its own row by only using bootstrap and no CSS since I know it works because it worked last time. enter image description here

        <section id="about">
            <div class="container about">
                <div class="row">
                    <div class="col-sm-12 col-md-7 about-content">
                        <h2 class="section-header"><u>About Me</u> <i class="fas fa-user-tie"></i></h2>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum laborum quos et ab culpa amet, expedita rerum. Minus fuga est laboriosam reiciendis quaerat</p>
                    </div>
                    <div class="col-sm-12 col-md-5 text-center pic-me">
                        <img  data-src="/static/img/logos/mean.jpg" >
                    </div>
                </div>
            </div>
        </section>

My CSS

.about {
    padding: 10vh 7vw;

    img {
        object-fit: cover;
        height: 250px;
        width: 250px;
        border-radius: 50%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

    .about-content {
        text-align: center;

        @media (max-width: 480px) {
            padding: 7vh;
        }
    }
}

One thing I forgot to mention is when I go to inspect and take off flex-wrap: wrap and then add it back again it fixes the problem. enter image description here

Upvotes: 0

Views: 105

Answers (1)

Emad Abdou
Emad Abdou

Reputation: 287

I think it's because

height: 250px;
width: 250px;

of your image, when screen resized, col-sm-12 col-md-5 size changes too, as your image has a certain width and height it can't fit the col-sm-12 col-md-5 size, so here are some options, try to give your img width: 100%, or give your div which has col-sm-12 col-md-5 classes overflow: hidden; or try to give your image another suitable width and height at this break point, also try to remove top: 50%; transform: translateY(-50%); from img styling

Upvotes: 1

Related Questions