Skip to content
Submitted about 2 years ago

order-summary-component

Canice•80
@Canice10
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Goodmorning, generally I had a ton of issues styling SVGs in this challenge. Firstly, please are there any means one could really cutdown the size of the svg codes? While getting the mobile view layout ready, the "font-size" in the "text-page" class kept on enlargening the whole font sizes. Thanks for the help in advance ☺☺

Community feedback

  • Aatypic•490
    @AatypicPosted about 2 years ago

    Hello and congratulations on your solution, it's looking nice !

    For the SVG question, I think you simply can't shorten svg's codes that's the whole point of an svg, those are its coordinates etc..

    But you can put your <svg> at the end of your page before the </body> give it a <svg id="yoursvg" ..> and then to make it cleaner in your card like this:

    <div id="image">
  <svg>
    <use href="#yoursvg"></use>
  </svg>
</div>

    I noticed you are missing the active states or :hover of your multiple links, you can check the design, there is one dedicated for that. And beware your <button> didn't inherit the body font-family. Anyway this is all minor stuff.

    Good luck 🙂

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

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