Skip to content
OverviewSolutions
9
Comments
7
Alexander Gusev
@WaRaGiSmYnIcKnAmE

All comments

  • Alexander Gusev•170
    @WaRaGiSmYnIcKnAmEPosted about 2 months ago

    Hi! On the screen of my old netbook, your site goes off the screen. Perhaps you should switch the display from the grid to the list earlier.

    0
  • Alexander Gusev•170
    @WaRaGiSmYnIcKnAmEPosted about 2 months ago

    We are waiting for your solution!

    0
  • Giulia•30
    @GiuliaFloripesSubmitted 3 months ago
    What specific areas of your project would you like help with?

    Tive dificuldades na parte de deixar o código responsivo e em colocar o ícone no button, aceito críticas para me orientar melhor da próxima vez.

    1 attempt, product-preview-card

    1
    Alexander Gusev•170
    @WaRaGiSmYnIcKnAmEPosted about 2 months ago

    Your solution is not very similar to what the challenge offers...

    Here are my suggestions for a fix:

    • To begin with, I recommend using the <main> tag for the main content of your page.
    • The header tags <h1>, <h2>, ..., <h7> should go in order to simplify navigation on the page.
    • You have a lot of values changing in px, which can have a bad effect when scaling the page and on mobile devices. For values that are the same everywhere, this is still acceptable, but it is better to set the dimensions and margins using em and rem
    • You are abusing flexbox and because of this, the content is constantly trying to move somewhere. Try to cram all the text into display: block, and let the card itself remain display: flex. Everything inside will be easier to arrange when the elements behave like blocks
    • For mobile devices, you only need to change the image according to the media request and change the direction of the flex-direction: column
    • To the question of the picture. Use the <picture> tag to use a media request to change the image depending on the screen Widths. Example:
    <picture>
    <source srcset="./images/image-product-mobile.jpg" media="(max-width: 640px)">
    <img src="./images/image-product-desktop.jpg" alt="Product bottle image">
</picture>

    <source> is responsible for an alternative path for <img> under specified conditions. Also, do not forget to specify an alternative text alt="Product bottle image".

    Keep making up more and you will come to the top!

    Marked as helpful
    0
  • Alexander Gusev•170
    @WaRaGiSmYnIcKnAmEPosted about 2 months ago

    Your solution looks better than the original!

    Marked as helpful
    0
  • Wasu44•70
    @Wasu44Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of solving some problems without help, just with my own knowledge.

    What challenges did you encounter, and how did you overcome them?

    I had problem with site on a mobile device so I used media root and I think it worked

    What specific areas of your project would you like help with?

    Want to improve my css skills.

    social profile html&css

    1
    Alexander Gusev•170
    @WaRaGiSmYnIcKnAmEPosted about 2 months ago

    Good work!

    0
  • abm-afk•70
    @abm-afkSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Understood much better how to organize tags and how to bring hierarchy

    What challenges did you encounter, and how did you overcome them?

    position, display, tags organization.

    What specific areas of your project would you like help with?

    Any suggestions are welcome

    blog-review-card

    2
    Alexander Gusev•170
    @WaRaGiSmYnIcKnAmEPosted about 2 months ago

    It's good!

    0
  • Alexander Gusev•170
    @WaRaGiSmYnIcKnAmEPosted about 2 months ago

    Good job! You have fixed a design flaw with the text and your solution looks better than the task!

    Marked as helpful
    0