Streaming live at 10am (PST)

Issue regarding relative div blocks

Hello everyone.
I’m currently designing a website for an agency, and im having troubles with the placing of various div blocks. I’ve added png’s of computers and tablets with blank screens, to make a div block fill these out and then fill these out with pictures, or gif’s. the issue is that when i resize the screen, the div blocks containing these pictures and gif’s does not resize accordingly, making them not fit the screens.
Not quite sure how to go about this, was hoping anyone in here could advise me?
Link: https://preview.webflow.com/preview/ovn?utm_medium=preview_link&utm_source=designer&utm_content=ovn&preview=68ace2b5e0f3ab948d19185b8fa289db&pageId=5f207b47bc0ef50e65b826e0&mode=preview

The sections where i have the issue is “Section” as well as “Promo section vr.5”
Thanks in advance!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Ok had a look and I like the effect very much.
You are almost there,

See if you can follow this,
Im working on the section just under main section.
Image service needs to be the relative.
Image service background image needs to be removed.
Add another div block.
This div block make absolute and background image to be the mac

Div block 10 mac2 needs to be absolute.

now once you line these up they should be the same all the time. Make sure on the screen size change that you apply to both any changes.

Hello iDATUS
Thank you so much for your reply. This is the last bit i need to finish up my site, so im very eager to get this to work.
Iv’e tried following your guidelines in various different ways, but it does not seem to work for me. I’ve added the div block (It’s called “Another div block”) and set the positions as adviced. It still moves around when i resize the screen. Can you please have a look if iv’e set it up correctly? Iv’e done it to the macbook in the left side.

Link: https://l.facebook.com/l.php?u=https%3A%2F%2Fpreview.webflow.com%2Fpreview%2Fovn%3Futm_medium%3Dpreview_link%26utm_source%3Ddesigner%26utm_content%3Dovn%26preview%3D68ace2b5e0f3ab948d19185b8fa289db%26pageId%3D5f207b47bc0ef50e65b826e0%26mode%3Dpreview%26fbclid%3DIwAR3Ri4pGKVsAvAII3eMiYzSXsIW8jadsLguVKR-KUfLswYRpxi9lX0KgcAo&h=AT1l-KMvvSglA4voey8nQCnVdbBbc0LjKxGFMVK_aXLQMgK5YvDVUnIF8rYE7OkYKxpRsRjkcHDaKpuFgR89W1hYKxwO_8dK9AfxyV_d6EdftQ6VP8MHz0tubQLGXI_76UdN-tri
In advance, thank you very much!

im on it.
Looks like you followed my instructions perfectly.
I see its not quite right but I think I edited some of the picture sizes etc.
Leave it with me, expect answer real soon.

Ok I think I found the big issue (not on a street corner)
On the gifs (the bit where you choose what image to show) you set the position to top left.
The mac image is cantered.

These kind of need to be the same.
Spacings - remove them and use positions, you can use pixels there.
Make sure both are set the same initial such as top left then change the numbers

I dont mention it in the video but its a must.

Here is a video link which I will delete once your happy.
link to video

Thank you iDATUS, iv’e managed to succesfully make the GIF stay inside the macbook following your steps. I’d also like to thank you for the video explaining the process - very helpful!

Now i have one last issue that i face - I tried replicating your steps in my “Promo section vr. 5” where i would like the exact same thing to happen. For some reason, even when i have replicated your steps, this does not work the same way. Do you have a minute to take a look at this section? I know im asking a lot, and im really appreciating your assistance.

Thanks again for the help you’ve provided!

Link: https://preview.webflow.com/preview/ovn?utm_medium=preview_link&utm_source=designer&utm_content=ovn&preview=68ace2b5e0f3ab948d19185b8fa289db&pageId=5f207b47bc0ef50e65b826e0&mode=preview

Taking a look now, be right back
some of your images are not centred.
Still looking
and you have been using margins to postition.
Fix those and it should be wonderfull.
If all ok, mark solved etc.

Hello iDATUS
Iv’e removed margins, and centered images, but the issue still persists. I’m pretty sure iv’e placed everything corrent. Iv’e updated my link with my newly made corrections, if you have time for a look.
Thanks once again

LINK: https://preview.webflow.com/preview/ovn?utm_medium=preview_link&utm_source=designer&utm_content=ovn&preview=68ace2b5e0f3ab948d19185b8fa289db&pageId=5f207b47bc0ef50e65b826e0&mode=preview

Hello Marc, I am back on it.
Quick tip when you change something back to a default value, make sure you click it an choose reset. Than removes the blue text and changes it back to white.
What I am doing now is resetting it to top left position.
I let you know how I get on.

Ok I found you issue its to do with padding.
Cant remember where it was as I changed a lot but to push the content from the left use it on side content only and padding not margin.
Problems come back.

I dont quite follow. If i add padding to “Side Content” It will move the entire image. As of now, i have not used margin, nor padding anywhere. I need the image with the different blank devices to stay in place, and move the 4 different div blocks into these screens (and have them stay here as i resize). When i add padding to Side Content, it moves everything, including the screens?
Thanks for getting back to me btw

You have 5% padding on section 2.
Remove that and put margin on “Side Content”

Fixed this, but the issue still persists :frowning:

Marc, sorry to be a pain but it will work, you have a lot of left over design on that little block.
Remove every thing not needed, z-index, overlaps etc.
Click the value and then the reset option to make it go white (default).
Then start again on the absolute top left hand icon.
Let me know how you get on.

You’re no pain at all, i appreciate you trying to help me out on this
Iv’e been trying to fix this for the last 2 hours, with no luck.
I feel like i have tried more or less everything now
No clue how to proceed from here, and i dont quite understand your previous instructions

We are going to solve it… Believe.
I will video my methods and see if I can re-create it working then post…

1 Like

here is the epic, special effect, block buster upload.
Well all that - epic, special effects, block buster.
watch it while you can

1 Like

Thank you so much iDATUS, by following your instructions, i managed to make the div blocks stay in place. Appreciate the effort you put in to helping me with this!
Have a great night, and thanks again :slight_smile:

thankyou, all sorted now.