Eguzozie Onyekachi• 340
@Onyekachi10
Submitted
Addiel
@addiellucena94
All comments
- Addiel• 370
@addiellucena94
Posted
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 helpful
1 - Prerna Lele• 70
@prernalele
Submitted
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.
Addiel• 370@addiellucena94
Posted
Hello, 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 - Kailera• 10
@kailera
Submitted
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).
Addiel• 370@addiellucena94
Posted
Nice work Samuel and welcome to FrontEnd Mentor
Marked as helpful
0 I have a gap when it is 2 card in row. How can i avoid it?
Addiel• 370@addiellucena94
Posted
Good 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-Bushra• 290
@Bn-Bushra
Submitted
Any recommendation on this is highly welcomed.
Addiel• 370@addiellucena94
Posted
Great 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
