All comments

• 

  RavanCod• 250

  @vanessie2424

  Submitted almost 2 years ago

  I'm still having difficulty making it responsive. I think the desktop view is okay, but the image for the mobile isn't showing and I can't figure out why. If someone can help, I will appreciate. Thank you.

  

  Product Preview Card Component Using HTML and CSS

  2

  70

  

  Edufelibugm• 450

  @edufelibugm

  Posted almost 2 years ago

  Hi, congratulations on completing the challenge. 🥳🥳

  it looks pretty good, and the problem is easy to fix, you just need to add a few properties and modify some, the most important ones to make it look good are 🔧:

  .content {
      max-width: 300px;
      margin: 0;
      display: flex;
      flex-direction: column;
  }
  
  .image {
      background-image: url(../images/image-product-mobile.jpg);
      min-height: 250px;
      min-width: 200px;
      border-radius: 10px 10px 0 0;
  }
  
  button {
      font-family: 'Fraunces', serif;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      width: 100%;
      background-color: hsl(158, 36%, 37%);
      color: hsl(0, 0%, 100%);
      border-radius: 4px;
      height: 35px;
      text-align: center;
      font-weight: 500;
      cursor: pointer;
  }
  

  only that 😌

  Have a great day and happy coding 🤖💚

  1
• 

  Drew• 100

  @andex23

  Submitted almost 2 years ago

  Please tell me if i can style this any better

  

  Single Price Grid Component

  3

  30

  

  Edufelibugm• 450

  @edufelibugm

  Posted almost 2 years ago

  Hi bro!! congratulations on your solution! 🥳🥳

  Your design looks good, but it can be improved 🦾

  🔧 any tips:

  • Your body has a display: flex; this causes the footer to be positioned next to your container, you can fix this by setting the property flex-direction: column;. 🖥

  • You could add a :hover subclass on your button to make it have some animation, you can just add an opacity: .5; transition: .5s ease-in-out. ✍

  that's all, the rest is just keep practicing 😌

  Have a great day and happy coding 🤖💚

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Oishik Biswas• 70

  @pippal5536

  Submitted almost 2 years ago

  Hi!! I have two questions that I can not answer. a) I messed up the background circle. I used position property. Is there any better or recommended method to code the background image? b) What is the correct method to center the avatar between two divs? I used negative margin but I know it is not the correct method.

  Thank you:))))

  

  Profile card with CSS flex box and mobile first approach

  2

  20

  

  Edufelibugm• 450

  @edufelibugm

  Posted almost 2 years ago

  Hi @pippal5536 !!! 😄

  I can't help you with the background but about at center a image between two divs, i recommend you use the atribute position: relative and add attributes how top: ;, bottom: ;, left: ; and right: ; to center the image. ✍

  other solution is the use of atribute position: absolute; 🤖

  Have a great day and happy coding 🤖

  Marked as helpful

  1
• 

  Gabriela• 60

  @Gabriela-hub-89

  Submitted almost 2 years ago

  any suggestions for improvement are welcome!

  

  Four card feature section

  3

  50

  

  Edufelibugm• 450

  @edufelibugm

  Posted almost 2 years ago

  Hi @Gabriela-hub-89 !!! 😄 Your design looks good, but not it's responsive for mobile resolutions. 📱📱

  It's very easy adjust that, only add @media (max-width: /* resolution where it looks wrong */) { /*your CSS code*/ } , then add the atribute display: flex; flex-direction: column; in your class "cards". 🤖

  And that's it, you already have your design for mobile!!! 🥳 🥳 🥳

  Have a great day and happy coding 💛

  Marked as helpful

  0
• 

  Felipe Bezerra Joazeiro• 60

  @felipejoazeiro

  Submitted almost 2 years ago

  Had problem with border around the icons.

  

  Responsive landing page using CSS Grid and Flex

  1

  50

  

  Edufelibugm• 450

  @edufelibugm

  Posted almost 2 years ago

  Hi bro, it's easy to solve the problem in the icons, define the width and height equal in the "a" tag, add border-radius: 50%; and finally add an display: flex with atributes justify-content: center; aling-items: center; , then just look for the correct icons in fontawesome. 🤖

  I hope it has been useful to you ✌

  have a great day and happy coding 😌

  0