All comments

• 

  Muhammad Umar Hashmi• 150

  @M-UmarHashmi

  Submitted over 1 year ago

  I have tried to make it as similar as possible. But nothing is perfect. So tell me what improvements can be made in it. Each feedback is highly appreciated. Thanks in advance! Happy Coding!

  

  Responsive and lightly animated FAQ Accordian

  1

  40

  

  Anna P. M.• 390

  @annapmarin

  Posted over 1 year ago

  Hi! First of all, congratulations for your work

  Here are some tips:

  • Notice that the background is not a solid color, but a linear gradient background: linear-gradient(color1, color2) (the gradient color codes are in the style-guide.md).
  • Also I would add a min-width to your main.container, so that the img.box does not change position.
  • The font-weight for the title is bolder in the design, and notice that the questions should have a bold font-weight when active.

  Hope this can help :)

  0
• 

  Nnanna• 50

  @Nnanna777

  Submitted over 1 year ago

  My first time trying media queries and responsiveness. So I struggled a lot

  Had issues margin, layout and mistakes all round

  Advice on the general outlook, things I should've done differently are appreciated.

  

  Hubble Landing Page

  2

  20

  

  Anna P. M.• 390

  @annapmarin

  Posted over 1 year ago

  Hi! First of all congratulations for your work

  Here are some tips:

  • About the media query ( @media only screen and (max-width: 375px) maybe you can add a larger max-width because mobile screens do not all have a standard size of 375px. Maybe I would set the rule at 450 or 500px. And then I would write another one from 375 or 400px to add the background for the mobile version).

  • Also, the background-desktop should be changed to background-mobile in the media query.

  • For the div.container you can try this:

  .content {
      display: flex;
      justify-content: center;
      align-content: center;
      flex-wrap: wrap; /* This means that the flex, 
  when it no longer fits on the screen, becomes a column, 
  i.e. the content is placed one below the other. */
      align-items: center;
      gap: 30px;  /* This adds a gap between the two divs */
      margin-top: 80px;
  }
  

  • For the .device img I would make it a little smaller so that the flex-row fits on a wider variety of screens.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Kamil Wiater• 230

  @WiaterKa

  Submitted over 1 year ago

  Had problems with a proper positioning of the image (please see the bottom line).

  Any feedback concerning the above (and other aspects) hugely appreciated :))

  

  Perfumes Preview Card

  3

  50

  

  Anna P. M.• 390

  @annapmarin

  Posted over 1 year ago

  Good job! Maybe you can erase the text-align: justify to fit the original design. Also, regarding the image, you can heighten the image: height: 455px; to fit in better, or you can try adding new properties to the div you named as "img_container".

  Also (but this is less important) you can add more right margin to the <h1> and more line-height and margin-right to the product description <p> to fit more the original design.

  Marked as helpful

  1
• 

  Pablo Rodríguez• 80

  @pablorodriguez-tk

  Submitted over 1 year ago

  I had some problems to do responsive images, because when i resize the card the position of image do not stay in the correct place , so for the moment the solution have only 2 possible widths.

  Feedback welcome, if there is some best practice to do it, just tell me

  

  faq accordion card main css only

  1

  40

  

  Anna P. M.• 390

  @annapmarin

  Posted over 1 year ago

  Good job!

  Perhaps you could try to add a new functionality in JS that causes the other tabs to close (i.e. return to the inactive class when click another tab) via an "if", with "remove" and "add".

  1