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

All comments

  • imLumarq• 210

    @imLumarq

    Posted

    Hi @Ali-El-Shoraa

    Congratulations on completing this project.

    1.I would suggest using the "em" unit for your media queries.

    /*your code*/
@media (max-width: 767px) {
.box { in that one
flex-direction: column;
}
}

/*modified code*/
/*767px*/
@media (max-width: 47.9275em) {
.box {
flex-direction: column;
}
}

    2.Give this article a read: PX, EM or REM Media Queries?

    3.Coding multiple media queries with the same break points is redundant in my pinion. Just use one and put all the code changes you would like to make in that one media query.

    Here's my solution:

    https://www.frontendmentor.io/solutions/product-preview-card-FyiG1l-E-s

    I hope you find this helpful 😄!

    Happy Coding!

    Marked as helpful

    0
  • imLumarq• 210

    @imLumarq

    Posted

    Hi Sekou SIDIBE

    Congratulations on completing your first project

    1.You have vertical scrolling due to the default margin on the body.

    Your code

    
body{
background: rgb(206, 230, 248) ;
font-family: 'Inter' ;
}

    Modified code

    
body{
background: rgb(206, 230, 248) ;
font-family: 'Inter' ;
margin: 0 ; 
}

    2.Remove the min-heigth: 70vh; on the .card{} as this causes the card to always be 70% tall of the device you are viewing it on. This issue can viewed on the on a Ipad mini with a dimensions of 768x1024

    3.Remove the flex-direction: column; on the section{} as this causes you card to overflow on smaller devices. This issue can viewed on the on a Samsung galaxy fold with a dimensions of 280x653

    Here's my solution:

    https://www.frontendmentor.io/solutions/qr-code-component-CmLwve7xsm

    I hope you find this helpful 😄!

    Happy Coding!

    Marked as helpful

    0
  • imLumarq• 210

    @imLumarq

    Posted

    Hi Othman

    1.I would suggest using a code formatter for your html. This can be accomplished by opening VSCode going to the extensions tab searching and installing Prettier - Code formatter. This is the code formatter that personally use and and currently has "33,009,579 installs".This would format your code making it so that other developers have a easier time reading your html.You can watch this video for help with Prettier - Code formatter Formatting your code is a waste of time - use Prettier instead.

    2.It is always good practice to include text within the alt attribute. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). Eg.

    /*your code*/
<footer class="footer">
<img src="images/image-avatar.png" class="avatar" alt="">
<p class="text_2"> Creation of <span class="text-2_style"> Jules Wyvern </span> </p>
</footer> 

/*changed code*/
<footer class="footer">
<img src="images/image-avatar.png" class="avatar" alt="Profile picture">
<p class="text_2"> Creation of <span class="text-2_style"> Jules Wyvern </span> </p>
</footer>

    Here's my solution:

    https://www.frontendmentor.io/solutions/nft-preview-card-OQ2J2JTSDt

    I hope you find this helpful 😄!

    Happy Coding!

    Marked as helpful

    0
  • imLumarq• 210

    @imLumarq

    Posted

    Hi, Si1entERA

    Congratulations on completing the project.

    • You could use flexbox of grid to place the card in the middle of the screen:
    body{
min-height: 100vh;
display: grid;
place-items: center;
}

    OR

    body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
    • I would suggest using the "em" unit for your media queries.

    Give this article a read: PX, EM or REM Media Queries?

    Here's my solution:

    https://www.frontendmentor.io/solutions/single-price-grid-component-K-A7ch3qS_

    I hope you find this helpful 😄!

    Happy Coding!

    Marked as helpful

    0