cup_of cup_of - 3 months ago 7
HTML Question

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!

Answer

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%);
}
Comments