Skip to content
OverviewSolutions
8
Comments
5
Swing95
@Swing95

All comments

  • Swing95•180
    @Swing95Posted almost 2 years ago

    Hello,

    nice solution.

    For media queries you can just state differences to code above and you don't have to write whole code again.

    Differences will be based on choosing mobile or desktop first approach.

    I see you have avoided using footer, probably because you could not get rid of it on the right side, when you used flexbox. You can stick it to the bottom by using this CSS:

    footer {
  position: absolute;
  bottom: 0;
}

    You can also use variables for colors etc. Example:

    :root {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    --gradient-bar: linear-gradient(to right, hsl(6, 100%, 80%), hsl(335, 100%, 65%));
    --pale-blue: hsl(243, 100%, 93%);
}

    Then go with this in certain selector color: var(--pale-blue); So you do not have to always search for colors.

    Good luck! :-)

    Marked as helpful
    0
  • 0xev•120
    @0xevSubmitted almost 2 years ago

    I found difficulty in project when I wrapped img in container

    When I unwrapped it, there was no whitespace

    Usually I find difficulty with "copying" exactly the look of assignment but since I don't have credits for Figma it is what it is for now

    Preview Card Component

    1
    Swing95•180
    @Swing95Posted almost 2 years ago

    Hello,

    Instead of <p>P E R F U M E</p> try using letter-spacing: Xpx;

    When creating new CSS file use CSS reset below:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    For img, I would suggest you to set

    img {
  display: block;
  height: 100%;
  width: 100%;
}

    and then keep adjusting your section #card

    Hope it helps

    Good luck :-)

    Marked as helpful
    1
  • Kevin Koziol•390
    @LozzekSubmitted almost 2 years ago

    So I came back to this project to just get most of it done and I got the bar working. The only thing that I want to go back and do better whenever I fully attempt this again is to make the desktop text bubble have the little bottom right triangle instead of it just being square as well as fix the 185 gb left bubble, I used position relative and im sure there is a better way to position this but this project was just giving me a hard time so it seems like I gotta go back and do some easier projects for now.

    Fylo Data #2

    1
    Swing95•180
    @Swing95Posted almost 2 years ago

    Hello Kevin,

    My solution for the white card with storage left was that I put that under div alongside with whole right card. Then I set position: absolute; for the right card div and position: relative; for white card div. Then I could set position to the right and up.

    You should set bar width to 100% of right card div so you have it aligned with white card in the end. It will also stay when resizing window.

    For white triangle I used pseudo-element after for div of white-card. See below:

    .storage-left::after {
    content: "";
    position: absolute;
    border-top: 30px solid white;
    border-left: 35px solid transparent;
    bottom: -1.3rem;
    right: 0;
}

    You can find my solution here: GitHub

    0
  • JY-PROG•10
    @JY-PROGSubmitted almost 2 years ago

    I couldn't align the card vertically despite the "align-items: center;" so I used the margin-top ...

    Qr code Compenent

    2
    Swing95•180
    @Swing95Posted almost 2 years ago

    Hello,

    Try to stay away of using heights as you can cause responsivity issues with that, try paddings instead. That will cause to adjust your wrapper (main) adjust height based on needs of other elements.

    Use main to wrap content

    Use code bellow to avoid box size issues and margin and padding calculations

    • { padding: 0; margin: 0; box-sizing: border-box; }

    Make a div that will contain only QR code and fill it with image. Then set image to have 100% height and width and display as block.

    Good luck!

    Marked as helpful
    1
  • Swing95•180
    @Swing95Posted almost 2 years ago

    Hi,

    for font settings etc in general, you can use:

    • { color: xyz; font-family: xyz; font-weight: xyz; }

    This will apply to everything

    When talking about *, try this:

    • { margin: 0; padding: 0; box-sizing: border-box; }

    It will make your life much easier.

    Additionally, you should use rem in your code for setting font sizes and you can set your base rem unit in html

    html { font-size: 15px; }

    Then 1 rem will be 15px

    Check here https://github.com/Swing95/order-summary-component-main

    Br David

    Marked as helpful
    1