Can't move precisely an image within a div

[k.richez]

Hello, im having a stupid problem, i have an image in a div with background color,
i want this image be like at right-center of the page but i want to precisely move it , like a margin-left:50px;
but the problem is, margin-left etc… dont work with my auto resize properties

so i want to align/move precisely my image which is in a div and i want this image resize for any devices/scale
help me please !

here is my code :

Edit fiddle - JSFiddle - Code Playground

[hbar1st]

You can look up using absolute positioning but doing that may may make your website unresponsive when people use it on different sized screens. So you should be really sure about your design.

[k.richez]

so i need to make a choice, unresponsive but good design or responsive but not good design

[k.richez]

i was having an idea like, put my image and text i want to align in table like td tr etc…
but i dont know if its a good thing to do and if it will resize for any devices

[hbar1st]

No not really. You just have to “have good design”. Which means you have thought about why you want such precise location and made sure it works for the screen widths you support.

So design first then you can find a way to make it work (either through absolute positioning or using media queries)

[k.richez]

Okey thanks!
but actually i already designed on Miro this thing, like i know where i want to place my image, my text, but i just dont know how to do it actually, i tried with absolute positionning but doesn’t work

[hbar1st]

is this what you were trying to do?
https://jsfiddle.net/sa0h9ru6/3/

[k.richez]

that was not but i found the solution with flex box
thanks!

div h1 {
    align-self:center;
    position:absolute;
    right:50%;
    top:20%;
}


div figure {
    align-self: flex-end;
    position: absolute;
    right:20%;
    top:20%;
}