MaximilianoDanielGarcia

Latest comments

• 

  Alina Alexandra•160

  @AlinaAlexandraVizireanuSubmitted about 1 year ago

  

  Responsive front-end quiz app

  #axios

  1

  40
  

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted about 1 year ago

  Hi Alina, great job!

  One little thing, I've noticed that when you submit an answer without making a selection this is moving on to the next question.

  The rest looks excellent. Congrats!

  1
• 

  Maria Paula Palazzesi•190

  @paupalazzesiSubmitted about 1 year ago

  

  Summary Result Component

  1

  80
  

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted about 1 year ago

  Hi María Paula, good job!

  In response to your question. You need to use media queries to change its design on different screen sizes. Here an example:

  @media screen and (width <= 650px) {
    .container {
          display: flex;
          flex-direction: column;
    }
  }
  

  The code above changes the properties of your .container class when the screen width is less or equal than 650px. Visit w3schools for more details about media queries.

  I hope these was helpful to you.

  Marked as helpful

  0
• 

  Camila Gamboa•30

  @camigamboaSubmitted about 1 year ago

  

  Solution Blog Preview Card Main

  1

  60
  

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted about 1 year ago

  Hi @camigamboa, great job!

  There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I use it and I recommend it to you.

  I hope this suggestion is useful for future projects.

  Marked as helpful

  0
• 

  AbrahamTegene•90

  @AbrahamTegeneSubmitted about 1 year ago

  

  Social links profile

  #cube-css#itcss

  1

  40
  

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted about 1 year ago

  Hi @AbrahamTegene, good job!

  If you are wondering how to center it, let me show you 2 easy ways:

  • Using Flex Box

  body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  • Using CSS Grid

  body {
      display: grid;
      place-items: center;
      min-height: 100vh;
  }
  

  For the attribution part, you can do this:

  .attribution {
      position: absolute;
      bottom: 25px;
  }
  

  I hope these was helpful to you.

  1
• 

  Specticall•370

  @SpecticallSubmitted about 1 year ago

  

  Audiophile w/ React, TypeScript, Tailwind, Framer Motion

  #framer-motion#react#tailwind-css#typescript#redux-toolkit

  1

  20
  

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted about 1 year ago

  Hi @Specticall, great job!

  I've noticed that the main image is cut off and that's due you are using object-cover instead of object-contain tailwind class. After you have replaced that class you will need to add a background-color: #0f0f0f; and a z-index: -1; on header tag.

  After you apply these suggestion it will better. The rest looks very good.

  Marked as helpful

  0
• 

  Rohan Basnet•280

  @Rohanbasnet12Submitted about 1 year ago

  

  Immersive experience built using Tailwind CSS and jQuery

  #tailwind-css#jquery

  1

  30
  

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted about 1 year ago

  Hi Rohan, good job!

  Here are some suggestions that might interest you:

  • I noticed that your #profile-card should be taller, try with min-height: 612px;.

  • Swap the background colors of #profile-card and buttons. The card should be dark-grey and buttons grey.

  • You should change the buttons' height, try with height: 45px;.

  • Semantically, buttons should be anchor tag because they are redirectioning you to another sites.

  After you apply these changes It will look better.

  Marked as helpful

  0