Design comparison
Solution retrospective
Hello Frontend Mentor Community!
I have finished the Order Summary Component
I think there's a problem I need to understand, but don't know how to fix it, I made it big so that when it scales down, there won't be much of a problem, because when in desktop view I make it smaller, there will be a problem once it becomes even smaller. Hoping for advices, thanks in advance!!
Community feedback
- @samaelwebdevPosted almost 2 years ago
Ansly,
Your project looks awesome, i think the problem is that your are using percentages for your min-width and min-height and the values are a little high, remember that your card is relative to it's parent which in this case is the body element and if the screen was too big the card would be too big also and you could encounter problems in the long run.
try replacing the min-width and max-width custom properties on your main element to say width: 350px; it may change the layout a bit but you should be fine.
if you want your image to be large and than be smaller when you resize your screen your could try something like min-width: 320px; ( no screen should be smaller) and your max-width: 550px; which may change your layout as well or you could use media queries to make it responsive... one good tip if your not already doing so is use your developer tools when you encounter a problem that isnt obvious on your code and try using pesticide its a browser extension and free tool that selects all of your elements and adds a border to it to make it easier to design and layout content.
if you find this information useful please let me know by clicking the ^ icon under my profile picture in this comment section.
happy coding.
Marked as helpful1@Median21Posted almost 2 years ago@samaelwebdev Thank you very much for the advice and tips, it really worked!
0@samaelwebdevPosted almost 2 years ago@Median21 your very welcome my friend, happy coding.
1
Please log in to post a comment
Log in with GitHubJoin 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