CSS Birthday Card

hi guys, i need some feedback on my side project, A birthday card for my sister
i wanna know how it looks but its not responsive
sooo here is the link,

https://codepen.io/HIC/full/PyKXRy/

give me any feedback or just an advice

3 Likes

Hi there!

First of all, what a lovely card you have made :smiley: :heart:

Some feedback:

  • Right now the text starts behind the card and it kind of ruins your nice letter display, is there anyway to start the text when clicking on the button?

  • The card when closed keeps changing size and jumping around.

  • You also see white lines here and there at the borders.

I tried css before and I do not think it is so easy to make all these “objects” work together, maybe I’m just looking at details too much and a general view would miss these things. But work hard and good luck, hope this helped! :smiley:

1 Like

WOW that’s amazing! I wish I could do that, but I’m just learning Jquery. It looks like you fixed a lot of the issues mentioned…or maybe I just don’t notice them…but there is one thing that might wreck the effect. When you view it on anything other than full screen the heart starts to move out of the card. and the text starts to write out of the card.

I wish I had a solution for this but I have been playing around with exact positioned animations as well and I haven’t been able to find away to specify exact coordinates with another object when the screen changes. So just make sure your sis sees it on a full screen LOL. Either way it’s super impressive with or without that fix. …and if you do find a way to get animations exact on changing screens please let me know!

hi, check out again i tried to fix them and thanks for your feedback
:sparkling_heart::sparkling_heart:

Is it the same link?
The text still starts before pressing the button, if you just wait some seconds and then open it you will see that.
Isn’t there some rest or pause function you can use for the text generator in the event listeners when clicking on the button?
Maybe it is too hard, I don’t really know since I kind of just started with the web area. :confused:

Hey works great on my phone and it was the small screen that was messing up before. So great job! Now I’m curious, how did you solve the having specific coordinate in a dynamic space problem for your animation?

hi,
i use “%” to make it responsive and for heart i use vw so the width is responsive

but its not fully responsive…

Hi all, check this new version of birthday card
https://codepen.io/HIC/full/ymJPPz
hope you like it!

1 Like

Looks great! :smiley:

One thing that will help with responsiveness is to go to Pen Settings, HTML, click “Insert the most common viewport meta tag”, and save & close.
This will help some.

Also, when you test resposiveness, be sure to use Debug mode.

Another thing with responsiveness: use @media queries to use different widths on different device witdths. Using percentages is also a good idea. :slight_smile:

1 Like

Thanks, for your advice

Maybe use a google font that is a writing style :3 also
Well, I could think of
worse things to be…
like dead!
sounds a bit harsh why not do something else like:

another year has passed time goes fast
the fun things we did i wish for another year with you to last
our
I know you don’t want to hear it
but your are another year older so we just got to beer it