Not happy how this SVG behaves with image on top

1

Hi all.
So I finished this project at Frontendmentor, but I feel it looks utterly crap.
I’m mainly talking about the top SVG with the image ontop and how this behaves when I resize the screen width?

In the design specification it looks so much better (see the design folder)

I have tried everything to get this to work properly and clearly need help.
Tutorials are of no use.

Here’s my github:

https://github.com/cmb347827/easybank-landing-page-master

I’ve had to add this SVG as an because of conflicting IDs.
I’ve added
width: 100%; height: 100%;
to the SVG (as classname svg-100).

I’ve removed the SVG width/height and replace with a viewBox with width/height, so it’s responsive.

I’ve added a parent class ‘svg-intro-outer’ to contain the maximum width.

Everything I’ve read online says that this should position the SVG in the same spot , while being responsive .

I just think the SVG becomes too small and is moving too much .
Or am I being overly critical , I don’t know , that’s possible.

Here’s the live view btw:
https://cmb347827.github.io/easybank-landing-page-master/
Any insight would be very much appreciated!
Thanks

2

Screenshot 2024-09-19 084140
Screenshot 2024-09-19 0841401903×1075 171 KB

The header’s height is slashing out the SVG.

3

Thanks, I know . The design shows the same , the SVG under the header and covering a bit of the next section.

4

ok, I reviewed the designs, let me try working it out, I’ll create a PR once I figure it out.

1 Like
5

Thanks, sounds good :slight_smile:

6

I’m still unsure about this. If I compare my final design the top SVG looks so much smaller than others.

7

Could you please specify what exact svg you’re referring to? Maybe a snippet of the problematic area in the code would be helpful. I have been looking through your code, but haven’t been able to really locate the issue yet. If you could also tell me what media selector we’re dealing with too, that’d be great.