Skip to content
OverviewSolutions
21
Comments
2
Brandon
@branalex94

All comments

  • Tamar•80
    @ttaammaarrSubmitted over 2 years ago

    While building this project I ran into 2 issues: First one was centering the card on the page, I tried using:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

    But this didn't center the card vertically, I ended up using:

    position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);

    This worked, but I'm wondering why display:flex; didn't work (I tried adding it to the body, main and .container)

    2nd issue was positioning the profile pic correctly and adding a border. I ended up creating a <div> container for the image. Is that a valid way?

    Thanks so much!

    Profile Card challenge

    1
    Brandon•290
    @branalex94Posted over 2 years ago

    Hey there! Nice solution. Just passing by to give my -hopefully helpful- advice. You could actually use display: grid; place-content: center; on the container, which in this case is the body itself. It will center whatever content it has to the center. Also may be useful to check on CSS grids, it could be useful to you in the future. Happy coding!

    Marked as helpful
    0
  • Soojeong•220
    @kongguksuSubmitted over 2 years ago

    I used position: absolute on the two images(bg-pattern files) to make the background. I had to adjust their sizes and positions in media queries multiple times. Is there a different way to use multiple image files to create the background of the website?

    Also, I spent way too much time on my queries.css file and it became quite long. I was wondering if there are good tips to make the file look more organized and not so repetitive.

    I've also noticed that on the phone, the mobile version of my website is super hard to scroll. Is there a way to fix this?

    Responsive Social Proof Section

    2
    Brandon•290
    @branalex94Posted over 2 years ago

    Hello there! I hope you are well. I'm here hoping my advice can help somehow. I've checked your live site and it seems you are using a div to set the background images. I'd recommend investigating the "background" CSS property because with it you can apply multiple images at once and it may be more convenient that way.

    By having that div, it seems like it's ocuppying some space it should'nt and you end up having double scrolling on mobile.

    To use different images depending on size I'd recommend you to use media queries as well. Just check the background property and it may help a lot. Hope i could be of help! If it may be useful, you can check my solution. It's not perfect though, but it may give you some answers.

    Marked as helpful
    1