| author | handle | source | date | likes | retweets | replies |
|---|---|---|---|---|---|---|
Ajay Yadav 🎯 |
@ATechAjay |
February 20, 2022 7:15 AM |
47 |
12 |
19 |
💚 Day 9️⃣6️⃣ / 1️⃣0️⃣0️⃣ Master in CSS Design series!
💥 Today we going to make it fully responsive to our HERO section.
📌 This is the final thread on the HERO section.
📌 Learn step by step with me!
#100DaysOfCode
#CodeNewbie
#webdev
Let me explain!🧵👇 pic.twitter.com/I4MWXbOHDE
📌 Today we are going to add these ingredients to our existing designs or existing breakpoints of the media queries.
📌 31rem = 496px
1️⃣ Wrap main links into a container of HERO section.
2️⃣ Then, change the direction of the flex into the column for main links(CTA).
3️⃣ Finally, we have to set the width of both links to 100%.
1️⃣ Wrap main links into a container of HERO section.
- Both links are kept in a container.
👀 See the code from line number 51 pic.twitter.com/t85YLbxwo5
2️⃣ Then, change the direction of the flex into the column for main links(CTA).
-
Now we have to change the direction of flex.
-
For aligned both links of the HERO section vertically. pic.twitter.com/Zp1Y3Thym8
3️⃣ Finally, we have to set the width of both links to 100%. pic.twitter.com/AtH65lUnOS
→ Codepen link: