Addiel
@addiellucena94All comments
- @Onyekachi10Submitted 10 months ago@addiellucena94Posted 10 months ago
Hi @Onyekachi10 I have many advice for you:
1- You have one Article and Section tag for nothing, the style used in you Section tag you maybe can use it in you Body tag.
2- You can use heigth auto and a padding in your board class.
3- Don't use a static width dimension for your image if the width of the board change with the screen dimension. The Board change but the Image not, this is not a good practice.
4- In your CSS, consider organizing properties in a consistent order, such as positioning, box model, typography, and visual styling. This makes your code more readable and easier to maintain.
Keep practicing and the results will improve. I hope my advice is helpful to you. Greetings
Marked as helpful1 - @prernaleleSubmitted 10 months ago
I wrote the media queries for 3 different sizes, I wonder if there is a better way to achieve this, because it seems redundant. Any inputs would be great.
@addiellucena94Posted 10 months agoHello, I have a suggestion for you, you should make your website show a function when it loads without waiting for the button to be pressed.
0 - @kaileraSubmitted 10 months ago
Hello, my name is Samuel (kailera is my game nickname) and this is my first experience coding a frontend challenge from FrontEnd mentor. This project proposes the creation of a responsive qr code card in html/css stack. This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This qr code card adapts in mobile and desktop screens, without many changes to its structure. Basically, im mobile and large/desktop screens it has to be in center view. The style guide provide by FrontMentorChallenge specify the widths for mobile and desktop screens: 375 and 1440 px respectively. Without much difficulty, to try to respect these measurements, the size of the wrapper was defined as follows:
style.css background-color: var(--light-gray); width: 100vw; max-width: var(--desktop); height: 100vh; display: flex; justify-content: center; flex-direction: column; gap: 10px; align-items: center;
Body has a white background, so when screen is large than a desktop measurement, the wrapper increases stops and shows the body background. This prevents the card from growing to the point of becoming useless (a QR code on a television screen that covers the entire transmitted image for example).
@addiellucena94Posted 10 months agoNice work Samuel and welcome to FrontEnd Mentor
Marked as helpful0 - @aseptimuSubmitted 10 months ago
I have a gap when it is 2 card in row. How can i avoid it?
@addiellucena94Posted 10 months agoGood job, only one suggestion, fix the font color and put the car brands in capital letters.
You can try to use:
color: white; text-transform: capitalize;
1 - @Bn-BushraSubmitted 10 months ago
- @Bn-BushraSubmitted 10 months ago
Any recommendation on this is highly welcomed.
@addiellucena94Posted 10 months agoGreat job, you just needed to work in the background, the next time use background property with image and color (background: url('you first image'), url('you second image'), #yourColor) and use background-position for the location.
1