I’m having an issue getting an image to right align to the page and overlap a div above the div that the image is in. I have tried it every which way, from relative positioning, cheating with negative margins, various layouts, inside of a div and on it’s own as an image – I can get it looking OK in the Webflow designer, but when I publish it never works right. Can anyone give me a simple explanation of how to do something like this? Thanks!
HI @itsmemason Task you are trying to achieve is relatively simple most important is to have mockup (at least on paper) how it should look like on tablet and mobile before you start building component. Once you have rough mockup done you can thing about how HTML should be structured to make it work the way you need. I presume you have at least basic understanding CSS when you building website. It will be hard for anyone to offer solution as you do not provide images for smaller viewports how text and image should behave in relation to each other.
Thanks @Stan I understand your comment, but for the sake of simplicity I’m just approaching this from a desktop perspective. It’s pretty obvious where I want the image to sit and how I want it to look in proportion to the text. To simplify further, I just have text divs on the left and an image div on the right - I want the image div to overlap the light grey div above it (where the ‘story’ text is). I think this is perfectly ascertainable from the image I provided, which is from the mockup I’ve created for this. In short, your comment is null haha, but I welcome any actual advice on how to achieve this on desktop.
HI @itsmemason I’m sorry that you have found my comment as useless. I was advice how developing websites are done this mean create mockups for Desktop tablet and mobile to have an idea how responsiveness of designed website should work.The hint was to provide all these designs or rough mockups to give you the most accurate response as possible.
Anyway the short answer is to place image in bottom container above awards div and give it negative margin-top to push image up. This mean that on mobile will be image under results text. As you didn’t specify how it should behave on other viewports and you have mentioned that you don’t care I hope this will solve your issue to give you an idea how it can be done.
