Design comparison
Solution retrospective
The background image provided for the desktop version was for the 1440px screen, so I removed the background image for bigger screens. If you have any other solution for this problem, please comment and help me improve my site. I love to hear your feedback. Do comment 😊.
Community feedback
- @James-aldersonPosted over 2 years ago
Hi Shivani Raj, when I first started to solve this website challenges, I faced a problem because the resolution of the mobile design projects was from 375 to 1440, so I was quite frustrated. Finally, after seeing the challenges solved by other users of this website, I realized that no one designs with the size mentioned in the challenge files, everyone has already defined sizes for their designs and used them for their projects.
I use sizes (500 or 600) in my projects. That is, the size of the mobile design is from 500 or 600 and below. (Maybe later I will change the size from 500 to 600)
Because I design mobile first, I first defined the background image of the body tag in the mobile design, then in the desktop design I only changed the source of the background image.
///////// Some solutions to improve the project you have designed:
- Define the background image as I explained above (i.e. in both mobile and desktop sizes).
- Use max-width attribute instead of width. (After changing the width to max width, you'll be surprised, because you don't need to redefine the width for each size so that the page does not scroll horizontally).
- Give your img tag this style (display: block;) to take the full height of its parent element.
- You don't need to use multiple sizes to style your project, it's better to use two sizes to style your project. (that is, one size for mobile and one size for desktop).
- Change the links defined with the <p> tag to the anchor tag (<a> tag). this elements (change - cancel-order). (if you want the page not to refresh after clicking on the <a> tag, set the value (javascript:void(0)) inside the href attribute put it).
- The box2 element does not need display: flex; does not have.
- It is better to place the repetition of the <body> tag background image in the X-axis, because in high resolutions it causes the image to be repeated in the X-axis and take up the entire page.
- This element is not needed (button-container), it is better to remove it so that the number of your HTML codes does not increase.
- Set the margin value of the body tag to 0 so that your project is full screen and does not scroll on the vertical axis.
- IMPORTANT Always put the style (box-sizing: border-box;) inside your CSS code. More information: https://www.w3schools.com/css/css3_box-sizing.asp
- open the README-template file that comes with the challenge files and then change the information inside it and then put it in your project files with the name README. 12.Is better to use custom css property.
** I have made a fork in your repository, you can see the changes there.
Don't worry about the many solutions, you will learn them over time.
Continue to learning 💪 And happy coding 🚀
0 - @afaiz-spacePosted over 2 years ago
Hey @cwaniraj149, replace
height:100vh;withmin-height:100vh;ofbodyelement also addwidth: 100vh;inhero-imageclass. and replacewidth:350pxwithwidth:100%ofbuttonelement;0@cwaniraj149Posted over 2 years ago@afaiz-space sure. Thank you for reviewing my solution.
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