Responsive image placement problems

[reubenross]

Hi guys,

I am having some problems controlling the placement of an image when the browser size is altered. You can view the page here: https://reubentesting.persona.co (the image in question is the red “society of the spectacle” on the left.

I have used the following CSS:

.imageframe {
        position: absolute;
    width: 100%;
    max-width: 100%;
    float: left;
}

@media (min-width:800px){
    .imageframe{
        width: 50%;
}
}

.centeredimage {
display: block;
    margin: 40% auto 60% auto;
}

And corresponding HTML:

<div class="imageframe">
  <img class="centeredimage" src="https://payload.persona.co/1/2/64321/216467/sots-shadow.png" height="110">
</div>

Is this code correct? Or is there a better way (and a way which results in more predictable behaviour) to do this?

Thanks!

[Beverleyh]

Isn’t this the same issue covered here? https://css-tricks.com/forums/topic/responsive-image-placement-problems-2/

[Author]

Posts