Skip to content
OverviewSolutions
8
Comments
5

Swing95

@Swing95180 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Swing95•180
    @Swing95

    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
  • Swing95•180
    @Swing95

    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
  • Swing95•180
    @Swing95

    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

  • Swing95•180
    @Swing95

    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
  • Swing95•180
    @Swing95

    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