Skip to content
OverviewSolutions
40
Comments
5
P
doublem
@MarioMinchevski

All comments

  • PJ•110
    @Kitezh1Submitted over 1 year ago

    I had trouble with the background images and positioning them. When uploading to Git Hub, they won't show up but show on my live site from Visual Studio. Any tips are appreciated!

    Profile Card Using Flexbox

    1
    doublem•620
    @MarioMinchevskiPosted over 1 year ago

    Hi Kitezh1!

    If the images show on your live server but they do not show when you open the index.html file or when you upload it to GitHub and to a live server, that means that the URL for the picture might not be correct.

    Try some different solutions like adding './' before 'images/bg-pattern-bottom.svg'. Depends on the file location in your project folder.

    As for the placement, a nice way to do it is with pseudo elements. I personally placed the first one with ::before and the second one with ::after. Of course, there are other ways to do it as well, but this seemed quite clear and straightforward.

    Hope this helps!

    0
  • Jordan Kleinbaum•210
    @JordanKleinbaumSubmitted over 1 year ago

    Question: I have an issue with CSS position, the way I centered my "card" div was by adding display: flex, align items and justify content to the entire body of the HTML Document. What is the best practice / easiest way to center the div, as well as center the text within the card?

    Thank you!

    QR Code

    3
    doublem•620
    @MarioMinchevskiPosted over 1 year ago

    Heya!

    Congratulations on solving your first challenge!

    Regarding the placement of your card in the center of the screen, you can also use

    display: grid; place-content: center;

    If this does not work, just set the body min-height: 100vh and it will be working for sure. It's a bit less code than using flex :)

    Hope this helps, happy coding!

    0
  • doublem•620
    @MarioMinchevskiPosted over 1 year ago

    Hey kishore613!

    Congratulations on your first solution and here's to many more! Here are a couple of tips that could improve your solution:

    • Make a habit of having a separate .css file for your styles. It could save you a lot of scrolling, make the code more readable, safer in terms of specificity and will allow you to add your styles on multiple pages if necessary

    • There are two ways of centering your design in the middle of the screen in both X and Y axis, those are : body { min-height: 100vh; display: flex; align-items: center; justify-content: center; } or body { min-height: 100vh; display: grid; place-content:center; }

    • At the moment you are having an equal amount of empty space between <div class="reaction">, <div class="Memory">, <div class="Verbal">, <div class="Visual"> and the button beneath them.

    To get closer to the design of that section, you can make the following structure:

    • section container div with a display flex
    • h2 tag for the title
    • summary scores container div, with the four scores inside in separate tags
    • a tag for the button

    this Way when you assign a certain "gap" value in the section container div, you will have an equal amount of space between the h2, summary scores container and button. Summary scores container can have a different gap value for the scores inside.

    Hope you will find this helpful!

    P.S. to insure browser support you can use "margin" instead of "gap", happy coding!

    0
  • doublem•620
    @MarioMinchevskiPosted over 1 year ago

    Hi there!

    Quick tip on how to center your class="main" in the center of the screen:

    • make the display of it's parent (in your case the body), display:grid;.
    • after that you can position the content in the center by using place-content:center;
    • if it does not center it, make sure to give the body a min-height: 100vh;

    Hope this helps, happy coding!

    Marked as helpful
    1
  • doublem•620
    @MarioMinchevskiPosted over 1 year ago

    Here's a weird thing that I do not completely understand. On my screen for both desktop and mobile it is exactly as it is on the design screenshot. I used all the units from the Figma file and double checked it by measuring it with the Ruler extension on Mozilla Firefox. The solution sceenshot on FR, you can tell that by looking at the text.

    Here it is in my browser.

    https://prnt.sc/HBm6jnbJaMxD

    0