Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Used HTML and CSS to completed

@DerRight

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

What I am most proud of is that I was able to complete this question quickly and solve the problems I encountered very quickly! ※Record: one hour

我最自豪的是我很快就可以完成這一題了,並且也很快就解決遇到的問題! ※紀錄:一小時

What challenges did you encounter, and how did you overcome them?

Basically, I didn't encounter any difficulties with this question. The main reason is that I am not familiar with the shadow part of the component and still need to strengthen it. I also consulted a lot of documents to solve it.

基本上這題沒有遇到甚麼困難,主要是對於元件陰影的部分尚不熟悉,還需要多多加強,也是查詢了很多文件才得以解決。

What specific areas of your project would you like help with?

First of all, thank you very much for coming to view my finished product. In this question, the of the component may be a bit complicated and the layout is a bit messy, especially the css part. It still needs a lot of improvement. Please give me your advice!

首先很謝謝您前來觀看我的成品,在這題中,可能對於元件的有點複雜,排版有點亂,尤其是在css的部分,尚需要多多加強,再請各位多多指教!

Community feedback

Adriano 37,910

@AdrianoEscarabote

Posted

Hi 雷楲𨛵(Wei-Hu, Ley), how’s everything? I think your project turned out great! However, I have some feedback that I think might be useful:

To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

  • Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

  • Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

Feel free to choose one of the two!

The rest is amazing.

I hope this is helpful. 👍

Marked as helpful

1

@DerRight

Posted

Hi @AdrianoEscarabote, yes, everything is very good, keep working on it.And you? Thank you for your advice, it helps me a lot!!!!!!!!

I have been wondering about the background picture for a long time, and I always felt that something was weird. It wasn’t until you told me that I could use these two methods that I put my mind down!

Thank you so much for your advice, have a nice day!!!!!!!!!!!!

1

Please log in to post a comment

Log in with GitHub
Discord logo

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