It looked really simple at the beginning, but when you build it with vanilla CSS, you will find some details which might take some time.
Please help me to understand the following. I had to play with, margin and padding in media queries to make it look like the screenshot. If you know then answer It would be appreciated 😃
1> I could not find out how to dynamically decrease space between an image of the note icon and the div with the text "Anual Plan" and text "$59.99/year"
2> I was trying to understand rem in dept. When I checked the font size for 1440 desktop size and for mobile are not changing in the setting and the font looks exactly the same. I only know that 1 rem is the font size of the root element, but do not know how they can help us
3> when we use rem? is it good practice to replace all pixels with rem?
4> When you hover over the button "Cancel Order" you can see it won't only activate the hover effect when you hover over the text but there is white space around it which activates it too. Is there a way to remove that white space and only activate hover effect when hover over the text "Cancel Order"
Thank you in advance
@unknowndecay
Posted
No1. Space-around uses even amount of space around every element, you could use gap to set a space between them and then margin-left: auto on the last link to push it to the right.
No4. If you wrap the anchor tags within span tags it will stop the space around the link being hoverable.
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
