Skip to content
OverviewSolutions
12
Comments
6
Marjan
@MarjanZivkovic

All comments

  • @Slaks97•180
    @Slaks97Submitted over 1 year ago

    Hi everyone! I am not convinced of my solution!

    1. In order to be able to center the .container div both horizontally and vertically using Flexbox, I set min-height: 100vh on the body. It was a shot in the dark which seems to be working. Could someone remind me of the role of height in relation to flexbox? I've not fully grasped it.

    2. I gave that same .container div margin: 100px auto as I also wanted free space at the top and bottom. Is that correct or is there another way?

    3. I didn't set a width on the body as it didn't seem to make much difference. Should I have done?

    Many thanks!

    QR Code Component solution using HTML and CSS

    1
    Marjan•320
    @MarjanZivkovicPosted over 1 year ago

    Hi @SLAKS97! Congrats on completing the project! Shots in the dark sometimes hit the target :) Just kidding!

    Yes, that is one of the ways to center a container on the page, setting the body as a flex container. align-items: center will center your container vertically (by default). The height of your body is dictated by the height of your container. In this case, your container is high enough so you can even omit min-height: 100vh on the body, it'll be the same. You want to use min-height: 100vh on the body when your container is less high. In this way, it'll be perfectly centered vertically in the middle of the screen.

    Horizontally you'll use justify-content: center (by default) to center your container on the page. In your case, it's not necessary since you're having margin: 0 auto on the container, which does the same thing.

    You can even remove display: flex and align-items: center and min-height: 100vhon body and you'll get the same result (try it out).

    As for the width, you don't have to set the width: 100% (especially not in px). By default, body, divs, and all the other block elements already have the width 100%, meaning all the available width of the screen.

    Hope some of this makes sense. Good luck!

    Marked as helpful
    0
  • samieyong•60
    @samieyongSubmitted over 1 year ago

    Still having issue using vh for height. My footer keeps jumping up for smaller screen heights which is very annoying. I believed it is because I positioned the elements inside the main container. Please I need feedback on how to resolve this.

    Interactive Card Details

    1
    Marjan•320
    @MarjanZivkovicPosted over 1 year ago

    Hi @samieyong! Congrats on completing the project! Yes, you're right. What's causing the problem is position: absolute; on your <section class='card-details>'. The quick fix would be adding a margin-top on your footer(ex. 4rem). A better solution is not using position absolute for this at all. You only need it for positioning the credit cards. Your <main class='container'> could become a flex container with flex-direction: row on big screens and column on small screens. In this way, your footer will never be covered because the elements will have normal flow. Hope this makes sense. Good luck!

    Marked as helpful
    0
  • Marjan•320
    @MarjanZivkovicPosted over 1 year ago

    Congrats on your first project! First of all, I can't access your page online. Check what's wrong with the deployment. From looking at your code I can say:

    1. Never use absolute paths for your files. It works on your machine but it won't work when you deploy your website. So you should replace: <img src="C:\Users\admin\Desktop\Files\image-qr-code.png" alt="QR-code" width ="200" height ="200" > with <img src="./image-qr-code.png" alt="QR-code" > if the image is in the same folder as your index.html. Also, avoid giving img the same width and height if the original image is not in square format. It causes image distortion. Btw, don't forget to also deploy your image with your other files.
    2. Instead of experimenting with giant margins (400px), you should set a max-width on your container ( class='main' ) and make it center on the page with margin:auto. Since it's the only child of your body, you can set the body as a flex container with min-height:100vh and center everything on the page with justify-content: center, align-items:center.
    3. Use display:flex instead of flexbox. Make better use of HTML semantic tags...

    Just a few tips. Hope some of this was helpful

    0
  • Marjan•320
    @MarjanZivkovicPosted over 1 year ago

    Hey KRISHNA! Great job on the design! I find it a little strange to completely remove the badge and the button from the DOM once you mark all messages as unread. If that was your goal, it's, fine. If not, there's an easy fix:

                     //....
                 let notificationCount = unreadNotifications.length - 1;
                 const onNotificationClick = (notification) => {
                           //...
                           if(notificationCount === 0){
                                  return;     
                            }
                            --notificationCount;
                 }
//...
}  ```                            

You just stop your function once the counter hits 0. Also, you have to move decreasing your counter below the if check so it stops decreasing if it's less than 0.
Keep going!
    Marked as helpful
    0
  • Oksana Karpova•10
    @karpovskaSubmitted over 1 year ago

    Hi guys, I'm not sure about the css files structure. Would it be better to leave as it is or make it all in one file in such small projects? Thanks in advance.

    QR code component

    3
    Marjan•320
    @MarjanZivkovicPosted over 1 year ago

    Congrats on your first project! Very well done! Any new file your page needs to load affects performance of your website. So I'd suggest putting everything into one .css file, especially for the small projects like this one.

    Marked as helpful
    1
  • Marjan•320
    @MarjanZivkovicPosted over 1 year ago

    You forgot to call your function on click on the dice. Working only on page loading. Also, your dice is completely rounded. Other than that, good job!

    0