All comments

• 

  Amobi Jonathan Chukwudi• 350

  @Errorman2003

  Submitted almost 2 years ago

  How do you center your div perfectly?

  

  QR code solutions using HTML and CSS

  #accessibility

  2

  3

  0

  

  Danilo Arcidiacono• 120

  @daniloarcidiacono

  Posted almost 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

  @sahalakma

  Submitted almost 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 -

  #chart-js

  1

  3

  0

  

  Danilo Arcidiacono• 120

  @daniloarcidiacono

  Posted almost 2 years ago

  You can try the before selector like this:

  <your-selector>::before {
     content: "$";
  }
  

  0

  This comment has received 3 repliesShow
• 

  Grzegorz• 130

  @GregW1994

  Submitted almost 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

  5

  0

  

  Danilo Arcidiacono• 120

  @daniloarcidiacono

  Posted almost 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

  This comment has received 1 replyShow
• 

  P

  Luciano Lima• 1,290

  @LucianoDLima

  Submitted about 2 years ago

  I have no idea how to replicate the overlay color on top of the black and white image provided

  

  Stats preview card component - SCSS

  #sass/scss

  1

  12

  0

  

  Danilo Arcidiacono• 120

  @daniloarcidiacono

  Posted almost 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

  @ykru6

  Submitted almost 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

  #accessibility#cube-css#semantic-ui

  1

  5

  0

  

  Danilo Arcidiacono• 120

  @daniloarcidiacono

  Posted almost 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

  This comment has received 1 replyShow