CODEWITHSUNDEEP
htmlcssposition
cup_of
cup_of

Reputation: 6687

How to position images responsively?

Hello I am having trouble positioning an image over a list item and making it responsive. At full width it works, its positioned correctly, but when I shrink the browser it starts to get out of alignment. You can see what I'm talking about in the pics below.

Full Width: (browser at 1920 px wide)

enter image description here

After browser has been shrunk: (browser at 1400 px wide)

enter image description here

HTML: (bare minimum html required for this question)

<section class="contact">
    <ul>
        <li>
            <img src="/images/footer_box.svg" >
        </li>

        <li>
            <img src="/images/footer_box.svg" >
        </li>

        <li>
            <img src="/images/footer_box.svg" >
        </li>
    </ul>
</section>

CSS: (bare minimum css required for this question)

.contact ul li  {
    position: relative;
}

.contact ul li img {
    position: absolute;
    left: 214px;
    top: -110px;
}

Thanks!

Upvotes: 0

Views: 61

Answers (1)

Thomas James
Thomas James

Reputation: 707

If you want to center it.

.contact ul li img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Upvotes: 1

Related Questions