Skip to content
OverviewSolutions
4
Comments
5
Matin Zafari
@MachineCode0101

All comments

  • Matin Zafari•70
    @MachineCode0101Posted over 1 year ago

    I'm currently working on this challenge, and I can say that you matched it really well man! One can be nitpicky about the circle around the star in the "How did we do" page, and also the design can be more responsive for mobile devices; screen resolutions under 375px, right now it overflows instead of shrinking the size of the "card" down! Overall very clean solution"

    0
  • Matin Zafari•70
    @MachineCode0101Posted over 1 year ago

    The static bars (div.bar) look great! I may add that one can achieve the same goal using rem instead of pixels; because the mobile version overflows and doesn't match the smaller screens. That can be solved by media queries for example: body { font-size: 16px; /* Default font size */ }

    @media (max-width: 375) { body { font-size: 14px; /* Smaller font size for smaller screens */ } } Overall a very very clean solution!!

    0
  • Matin Zafari•70
    @MachineCode0101Posted over 1 year ago

    Hi, I see that you have actually solved the problem but need help putting your page on GitHub Pages, the current live-link that I see, is not up on the web. A simple way to fix that is to put your "index.html" and "style.css" and "image-qr-code.png" files outside of the folder "FM Task".

    Afterwards in the html file change line 25 which is: <img class="card-image" src="./images/image-qr-code.png" alt="QR Code Image"> change it to: <img class="card-image" src="image-qr-code.png" alt="QR Code Image"> Notice that you should not put the first "/" or else the image will be invisible.

    If you need clarification please ask!

    0
  • Matin Zafari•70
    @MachineCode0101Posted over 1 year ago

    I was stuck at the same thing, Try removing "/" from <img > and putting it in the same folder as the html. for example this, if you have the image in the same folder as html file. <img src="image-qr-code.png" alt="image-qr-code"></image>

    I know this can be frustrating but it helped me but it's a routing issue/feature of GitHub Pages.

    Marked as helpful
    1
  • Matin Zafari•70
    @MachineCode0101Posted over 1 year ago

    The design can be responsive as well. By that I mean when we change the screen size to a smaller one or a mobile device, the current design "overflows" when collapsed, For example instead of using "px" we can use "rem" or even better "100%" and so on.

    1