Skip to content
OverviewSolutions
11
Comments
6
imLumarq
@imLumarq

All comments

  • imLumarq•210
    @imLumarqPosted over 1 year ago

    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
    @imLumarqPosted over 1 year ago

    Hi @mauricioarrequena

    /*500px*/
@media (max-width: 31.25em){
#main-container{
...
}
}

    Here's my solution:

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

    I hope you find this helpful 😄!

    Happy Coding!

    0
  • imLumarq•210
    @imLumarqPosted over 1 year ago

    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
    @imLumarqPosted over 1 year ago

    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
    @imLumarqPosted over 1 year ago

    Hi Othman

    • I would suggest using em for your media queries

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

    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
    @imLumarqPosted over 1 year ago

    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