Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
20
Comments
6
Petros Devrikis
@Petrosdevri

All comments

  • EmrePW•150
    @EmrePW
    Submitted over 2 years ago

    Frontend-Mentor-Preview-Card

    2
    Petros Devrikis•380
    @Petrosdevri
    Posted over 2 years ago

    Hey there, nice work and congrats for completing the project!

    A few notes on your solution:

    • Try changing the width of your main element to a smaller value in order to ensure that both images and text display in harmony. By setting it to auto you basically enable the browser to render it with issues (for example the image won't appear well if you zoom to 100%). I personally chose to wrap these elements inside a .product-preview div after the main element and set a width of 550px and a height of 400px, which I of course changed for smaller devices by reducing width and increasing height respectively.

    In conclusion, your project seems to be decent and by working on various details and practicing frequently you will be able to achieve even better results.

    Marked as helpful
  • Raymond•70
    @IpieA
    Submitted over 2 years ago

    A responsive notification page designed with HTML, CSS & JavaScript

    1
    Petros Devrikis•380
    @Petrosdevri
    Posted over 2 years ago

    Hey mate, nice work and congrats for completing the project!

    There doesn't appear to be any issue since everything is set correctly (ratio doesn't play a huge role as proportions seem to be in line with the prototype).

    In conclusion, your project seems to be decent, keep going!

  • Mohamed Emad•320
    @Mohamed-Emad97
    Submitted over 2 years ago

    Stats-Preview-Card-Component-Main

    #bootstrap#sass/scss#vite#react
    1
    Petros Devrikis•380
    @Petrosdevri
    Posted over 2 years ago

    Hey there, nice work and congrats for completing the project!

    A few notes on your solution:

    • Try changing the font-weight of your h1 to 700 in order to make it bolder. This will also improve spacing between the elements.
    • By the way, congrats for using Vite, I haven't seen it being used often.

    In conclusion, your project seems to be decent and by working on various details and practicing frequently you will be able to achieve even better results.

    Marked as helpful
  • Mallikarjun M•30
    @CodeBustler
    Submitted over 2 years ago

    02. QR Code | Using CSS Flexbox

    1
    Petros Devrikis•380
    @Petrosdevri
    Posted over 2 years ago

    Hey there, nice work and congrats for completing the project!

    A small note on your solution:

    • You could probably increase the width property of .container to 300px since you define most widths based on percentage, therefore they will automatically stretch to reach the same ratios as now (appearance will be the same).

    In conclusion, your project seems to be decent and by working on various details and practicing frequently you will be able to achieve even better results.

    Marked as helpful
  • Taruna•305
    @Tiyana19
    Submitted over 2 years ago

    Product card preview with Flex property of CSS

    4
    Petros Devrikis•380
    @Petrosdevri
    Posted over 2 years ago

    Hey there, nice work and congrats for completing the project!

    A few notes on your solution:

    • Try removing the padding property on the .card-text class as it's expanding the text of the class to the bottom. Instead impelement a flexbox with display: flex.
    • Image doesn't seem to have problems in my computer, but you can follow the solution mentioned by Dennis.
    • You may want to eliminate some classes before the actual class your style is affecting (f.e. instead of .main-class .card-component you can just write .card-component). Otherwise you may want to use SASS as a preproccessor because nesting can be done at an easier pace and you could save a lot of lines.

    In conclusion, your project seems to be decent and by working on various details and practicing frequently you will be able to achieve even better results.

    Marked as helpful
  • Raymond•70
    @IpieA
    Submitted over 2 years ago

    Results summary component using HTML & CSS

    3
    Petros Devrikis•380
    @Petrosdevri
    Posted over 2 years ago

    Hey there, nice work and congrats for completing the project, I am also a newbie here :P .

    A few notes on your solution:

    • I don't think you need to add min-width since the current implementation seems to fit well within mobile screens, plus defined margins are sufficient. Overall, you could answer me and elaborate on this proposal.
    • You could probably work a bit on reducing the width of the .result and .summary sections. While the current implementation is still adequate, it occupies more space than needed. You may switch the max-width property defined in container to a lower value.
    • Range is a bit far-fetched compared to the ratio but I have done the same so it's overall fine.

    In conclusion, your project seems to be decent and by working on various details and practicing frequently you will be able to achieve even better results.

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub