Image overlap in main header

Design help General
1

Hi everyone,

I am using a template that I am customising to help me understand webflow and front-end better.
I have tried to create an image overlap (where 2 images overlap) but it looks like it has created a big gap at the bottom of the container, making it difficult to add a heading after the images.

Here is my site Read-Only: https://preview.webflow.com/preview/blast-2-template?utm_medium=preview_link&utm_source=designer&utm_content=blast-2-template&preview=38f6821455ea92254f4ba9c8d225c151&mode=preview

Thanks for any help provided

2

Change your image divs to “absolute” instead of “relative”.

3

thanks Mike, I have but it has moved both image blocs, looks aligned on the designer mode but not on the preview

4

I have gone through your navigator structure in more detail and it seems that there are a few things you have to change:

  1. Your container height should be “auto”.
  2. Change your container display to flex
  3. Place all your headings and text in a new Div block (default settings)
  4. Place all your images in another new Div block (default settings)
  5. Change your image settings to Position: Static, Width: 100%, Height: 100%, Fit: cover
  6. Change your top image div settings to Position: Relative, Left Right Top Bottom Positions: auto, z-index: 1, Width: 420px, Height: Auto, Float: Don’t Float
  7. Change your bottom image div settings to Position: Relative, Left Right Top Bottom Positions: auto, Width: 420px, Height: Auto, Float: Don’t Float, Left Margin: -76, Top Margin: -176

This should also help you with responsiveness on different breakpoints. You can change your container display to block or flex vertical for smaller breakpoints and make adjustments accordingly. I hope that helps.

5

Thanks Mike, we are getting there! but feels like I have missed something… I have tried to change the image widths but it would bring the images outside of the page…