Skip to content
OverviewSolutions
7
Comments
5
Danilo Arcidiacono
@daniloarcidiacono

All comments

  • Danilo Arcidiacono•120
    @daniloarcidiaconoPosted over 2 years ago

    If you have only a single tag inside body, you can try to use flexbox:

    html, body {
height: 100%;
}

body {
display: flex;
justify-content: center;
align-items: center;
}
    0
  • sahal akma•30
    @sahalakmaSubmitted over 2 years ago

    Building Chart according to the given model is a little bit difficult. but after knowing about chart js and it's features it became easier process.

    The Next Challenge was to connect the given JSON data with our bar chart. after some research i find out what is the problem and got the solution.

    The only problem I am Facing now is to Edit the Tooltip Label of Bar Chart. I want to add an Extra "$" sign before the amount in tooltip, But I Can't do that. If anyone know about that Please give me solution❤️

    Responsive Landing Page Using Chart JS -

    1
    Danilo Arcidiacono•120
    @daniloarcidiaconoPosted over 2 years ago

    You can try the before selector like this:

    <your-selector>::before {
   content: "$";
}
    0
  • Grzegorz•130
    @GregW1994Submitted over 2 years ago

    Any ideas how to better position "Annual Plan $59.99/year" so it moves a bit to the left? I used margin-right, but it doesn't look good on small screens .

    Simple project made with flexbox

    1
    Danilo Arcidiacono•120
    @daniloarcidiaconoPosted over 2 years ago

    Hello, I would start by adding this:

    .shopping-item-details {
   ...
   flex: 1 1 auto;
}

    which is a short form for:

    .shopping-item-details {
   ...
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
}

    That makes the 'Annual Plan' grow and take the available space.

    Finally, add the following:

    .shopping-item {
 ....
  gap: 1rem;
}

    gap adds a margin between flex items.

    Marked as helpful
    0
  • Danilo Arcidiacono•120
    @daniloarcidiaconoPosted over 2 years ago

    Didn't try this challenge yet, but I can think of two ways to tint the image with CSS:

    1. Using a suitable combination of filters (see https://codepen.io/sosuke/pen/Pjoqqp);

    2. Applying an overlay (with position absolute/relative) with a semi-transparent background color;

    0
  • Yakeru•260
    @ykru6Submitted over 2 years ago

    How organize and clean my code was? Is my code a clutter, or inefficient? What could I've done better next time? What should I acknowledge in order to up my skills in CSS?

    By the way, if the Web URL has problem then it's my bad, because this is my first time use Github. And this is my 2nd attempt at upload this solution, since the web crashed somehow...

    Frontend Mentor | QR code component

    1
    Danilo Arcidiacono•120
    @daniloarcidiaconoPosted over 2 years ago

    Hello, here are some things that come to mind:

    1. Use BEM notation consistently to name your CSS classes (block__element--modifier);

    2. The font is imported in HTML but it's not used in CSS;

    3. Do not select h1, h4, p tags directly. Either add a class to such tags or use a CSS combinator to target them;

    4. Use max-width for the card. Also don't set a fixed height.

    5. Use CSS custom properties to centralize constants, like colors;

    6. Put your CSS files in a dedicated folder;

    0