The Elements in a Section are overlapping

Hello all,

I am close to project completion and have one last big problem on my website. It’s about the following slider section: It should look like it is currently implemented (see screesnhot 1). Unfortunately, everything overlaps as soon as you drag the Browser window smaller (See screenshot 2). Now I am looking for a way to keep the design reasonably and still fix the overlaying.
Before I list all the attempts I have made, I would just attach a preview link and maybe someone of you can help me. Thanks already for that :slight_smile: :grinning_face_with_smiling_eyes:

I am very grateful for any answer! Have a nice week, greetings
Jan

Screenshot 1:

Screenshot 2:

1 Like

I think your title is overlapping because you’ve added it to the slide. Try adding it under ‘Flex Half Cont’ and above ‘Employee Slider’.

Then slides don’t have any values against it to set the width or height. They use margin and padding and seems to be scaling as per the text.

Thanks for your message!
Unfortunately this does not solve the problem. I think it’s because the Heading was on “absolute” and not static. But when i put it on static, it gets messed up and not in the right centered order with the other “Speech bubbles”…
And when I now go -Margin to achieve this “Centering”, the Heading will dissapear to the top and not the bottom…

Is there another way to adjust the first speech bubble to the correct order?

1 Like

I simply solved it by using px instead of VH for the whole section.

1 Like