Hi everyone,
Here is my first challenge. I really enjoyed working on it and would greatly appreciate as much feedback as possible.
The one component I struggled with the most was the background wave image, I wasn't sure how to introduce it and eventually settled on including it as a background-image in the CSS file. I did find it difficult to adjust it properly to the layout and I'm not entirely happy with how it turned out, I think it could have been done a lot better, I'm curious to know what your thoughts are on my solution for this particular element, and what you would have done differently -->
.bg-image {
position: absolute;
background-image: url(images/pattern-background-mobile.svg);
background-repeat: no-repeat;
background-size: 100%;
z-index: -1;
width: 100%;
height: 100%;
}
There's two problems I have with it so far:
-
How it looks on the desktop view: I don't think it matches the design perfectly nor does it on the mobile view to be fair.
-
How it looks on mobile devices: when I viewed the completed design on my iPhone 8, annoyingly I could move the screen up and down and this ruined the design as the card was static on the centre of the screen with blank space above or below as I moved it.
Please do let me know if anyone had the same problems or what your solution would be for this.
** I also viewed the finished design on a larger iPhone 11 and again it looked way off because the viewport was vertically a lot larger which left blank space on the top and bottom.
