Making a Responsive (Birthday) Card with HTML and CSS

Use HTML and CSS media queries to make a responsive card that is portrait on mobile and landscape on desktop.

In this tutorial, I will show you how to make a responsive card using just HTML and CSS.

A responsive card is one that looks good on every size screen. We can accomplish this by using relative heights and widths instead of absolute measurements and also by using @media rules to define CSS properties to take effect only on specific screen sizes.

What topics should I cover next?

Let me know in the comments what kinds of projects you want to see me make in my tutorials!

🖥 More Web Development tutorials

💻 More tutorials

🙋‍♂️ Find me on other channels

💖 SPONSORS 💖
Get your username or a link to your channel here by sponsoring on Github

🎁 GET FREE STUFF WHILE SUPPORTING MY TUTORIALS

[DevProTips]

💖 Let me know if you have any questions! 🗣 What do you want to see more of on my channel?
👍 Thanks for watching! Don't forget to like and subscribe!

[JamesQQuick]

Love this! Super simple. Great turtorial :)

[killernandy]

Thank you, sir, that was helpful and clear as well. Can you make more coding stuff like this. Then it would be great.😃

[nurnadhrah]

Thank you so much for this tutorial. I hope to see more from you :D

[AA-oiru]

Would love to see a Random Password generator sir

[robertadams]

great video but you need to set up the volume before you record, I have to have the volume maxed out to just hear your recording. constructive criticism not meaning to be rude.

[tsbzzsm]

Thank you, can we send the web page we build after we create it, like via text sms in a link?

[theresawizorek-macintyre]

Hello, Can I get a copy of that image? I tried this on my own and got as far as adding display information under .card and it did not work. I think it may have to do with they type of image.
Thank you,

Theresa

[YehezkielHs]

umm how do i open my own code to the browser??

[emmanuellaakhilome]

Thank you, sir, but how can I send it via WhatsApp?

[immani]

But if we want to send this to someone
It will open in their devices or not ?
"I think the code should be in their device 🥲."