I have tried using variables extensively for the first time to define paddings and all sort of spacings. I would like your feedback on that! Also any feedback to DRY the code and organise it efficiently is welcome! Thanks in advance.
How do I center the "Change" anchor tag? I used the margin-top it wont work maybe because of the padding? someone enlighten me ty.
Hi, apply "align-items:center" to div with the class 'SubscriptionPlan'. This makes the vertical elements centered when the display is flex. You can read more about flexbox on https://css-tricks.com/snippets/css/a-guide-to-flexbox/ You can understand the concepts from this game https://flexboxfroggy.com/
I hope this would be helpful in understanding how to align flex items and much-more. Happy coding!
Any help / hints for making the image part more responsive? As the window sizes decreases the image squashes.
Hi. img{ max-width:100%; height:auto; }
I hope this should fix your problem. Instead of width:100%, max-width:100% will ensure the width of the image reduces when the viewport width start decreasing. Instead of height:100%, height:auto will adjust height according to width to maintain aspect ratio. In this way, the images will never be stretched or squeezed.
And keep coding.:)
So the message with "185 GB left" on firefox works like the design but chrome, it doesn't if you guys know any fixes I am happy to hear, and I don't know how to make a border radius to it on the left bottom corner because I used clip-path. Any other mistakes that I did would be appreciated if you guys can tell me, thanks.
Hi. First of all congratulations on completing the challenge. I had faced the same issue, while using clippath you can't retain the border-radius because you have clipped the border. Instead of using clippath, make the bottom right radius zero. And add the following code. You are good to go.
element::after { content: " "; position: absolute; top: 100%; /* At the bottom of the tooltip */ left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: white white transparent transparent; }
I have copied this code from https://www.w3schools.com/css/css_tooltip.asp P.S.: try changing left, margin values. You are good to go. Keep coding.
What should I focus on learning next? Would learning JS along with HTML & CSS be okay? What should I learn to start building web apps?
Hi @aadirajuthup. First of all congratulations on starting web app and completing your first challenge. You've done a great job! Regarding your question about responsiveness, You can start learning and using flexbox in css. As far as development is concerned, in my experience first work on html & css. Complete a few challenges and when you get comfortable in css, then move to javascript. That approach has worked for me. Meanwhile keep learning js through tutorials.
