Yaika Race

Latest comments

• 

  Khemmie Ray•280

  @Khemmie-Ray

  Submitted over 2 years ago

  

  Expenses-chart

  2

  10
  

  Yaika Race•290

  @YaikaRace

  Posted over 2 years ago

  Hello Khemmie, congratulations on completing this challenge! The solution to your problem is simple, you have to add position: relative; to your .chart-container and it will look like this:

  .chart-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-end;
      position: relative;
    }
  

  This so that your .banner takes as reference of position to the container in which it is, after this you add a top: -48px; (this can be more or less distance depends on your taste) and it would be like this:

  banner {
      background-color: hsl(25, 47%, 15%);
      color: white;
      margin-bottom: .7em;
      padding: .4em .2em;
      border-radius: 5px;
      text-align: center;
      position: absolute;
      top: -48px;
      display: none;
  }
  

  And so all the banners will appear near their corresponding bar.

  This was my solution to your problem, I hope I helped you!

  happy coding!

  0
• 

  Amobi Jonathan Chukwudi•350

  @Jonathanthedeveloper

  Submitted over 2 years ago

  

  Notifications page using JavaScript

  #accessibility

  1

  30
  

  Yaika Race•290

  @YaikaRace

  Posted over 2 years ago

  Hi Jonathan congratulations on completing the notification page challenge! My recommendation to improve the responsiveness of the page is:

  • Use less floats, floats give a lot of problems when making responsive designs, and personally I don't like to use them, instead I would recommend you to use flexbox to align elements to one side of the screen and make the design more responsive, you could even use CSS Grid to improve the responsiveness of the page.
  • Here are some articles that may be useful if you don't know how to use flexbox and CSS Grid or you don't know much about it:
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
  • https://css-tricks.com/snippets/css/complete-guide-grid/

  1
• 

  Vince•60

  @vincemarq01

  Submitted over 2 years ago

  

  Notification page using tailwindCSS

  1

  20
  

  Yaika Race•290

  @YaikaRace

  Posted over 2 years ago

  Hi vince congratulations on completing the notification page!

  I see that you use Tailwind and that you set the colors using arbitrary values, I am not an expert, but, I recommend you to adjust your Tailwind configuration file to add the color palette that comes in the style guide and other custom properties you want to add to not repeat the color every time you want to use it, for example instead of putting

  text-['hsl(224, 21%, 14%)']
  

  you could configure your tailwind.config.js file like this:

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
      colors: {
        'very-dark-blue': 'hsl(224, 21%, 14%)'
      }
      extend: {},
    },
    plugins: [],
  }
  

  so that the color is reusable and in your html file it would look like this:

  <h1 class="text-very-dark-blue">Notifications</h1>
  

  and your code will be more readable for people who want to view and/or edit it! This is what I can recommend you, I hope it has been helpful!

  Here are some links to documentation that might be useful for you: https://tailwindcss.com/docs/adding-custom-styles https://tailwindcss.com/docs/customizing-colors

  0

  Marked as helpful