Looking to hire developers?
Submitted
@LysitheaDarkKnight
Question 1: What is the best way to apply padding inside the menu text (Right of the image)? I did it by giving padding to the menu text container and margin to the "Gabrielle Essence Eau De Parfum" so I am not sure if it is an effective way of aligning my text inside.
Question 2: Increasing the image of the Cart Icon inside the button would un-center the "Add to Cart" text. Is there a way to bypass this?
@freakyjones
Posted
@ LysitheaDarkKnight, congratulation on making this great solution.
if you want to align your text, use the text-align center. I just saw your code, use of padding and I think it's a pretty decent way to achieve aligned goals, although I will suggest using either padding or margin to achieve your goal.
you can make use of the path of SVG instead of using an image.
Thanks, Happy coding
Marked as helpful
@correlucas
Posted
👾Hello Hussain, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!
The best way (in my opinion) to add padding to the element is by using gap if the padding between all the content is the same, or use the padding-bottom to separate all the elements, this way you've more control over the elements. If you apply padding-top and bottom together this gets tricky to manage the content. So you can use these two alternatives.
To keep the icon responsive and adjusting with the buttom you need to use img {display: block; max-width: 100%; }
👋 I hope this helps you and happy coding!
Marked as helpful
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
