I'm struggling with the padding and div spacing, please look at my css

Community feedback

• 

  ebenkanin•60

  @ebenkaninPosted 2 months ago

  Hello Amr,

  At first glance, i could see you did not specify a font style to be used. This made your work use the default font style of the user's computer. Do look into specifying font style properties especially when defining the rule for the body of your work. The font for this particular challenge was Figtree and it is easily accessed from fonts.google.com.

  In your next project, do log on to that website, search for the font and import it into your work. click on your selection and then import it by copying the import code and placing the links in the head of your html and using this rule in your css.

  // <uniquifier>: Use a unique and descriptive class name // <weight>: Use a value from 300 to 900

  .figtree-<uniquifier> { font-family: "Figtree", system-ui; font-optical-sizing: auto; font-weight: <weight>; font-style: normal; }

  Good job! Keep it up

  Marked as helpful

  0

  ---

  

  Amr-Atef-k•30

  @Amr-Atef-kPosted 2 months ago

  @ebenkanin thank you so much for the helpful feedback 🙏🙏

  0
• 

  Edudje wisdom•130

  @CitycodPosted 2 months ago

  Main Container (main) The main element is styled to be centered both vertically and horizontally using position: absolute; and transform: translate(-50%, -50%);. This approach works, but it's not responsive. Consider using Flexbox or Grid for centering. The height and width are fixed, which might not be ideal for different screen sizes. A more flexible layout might use percentages or max-width/max-height. The box-shadow property creates a shadow, but using 0px 0px for the last two values would make it more natural. Photo Styling (main .photo) padding: 30px; is used, but ensure there's enough space in the container (main) to accommodate this padding without overflowing. border-radius: 40px; is quite rounded, which is fine if that's the intended design. Info Section (.info) Padding is set uniformly with padding: 0px 30px 0 30px;. It’s better to use padding: 0 30px; for consistency. The .f class is used for a small element. Consider whether the fixed width and height are necessary, as they could cause issues with responsiveness. Spacing Issues .s, .l { padding: 10px 10px 10px 0px; } can be simplified to padding: 10px 10px 10px 0; or padding: 10px 10px 10px 0;. .s-card has some padding, and the display: flex; align-items: center; is good for aligning the items horizontally. Text and Image Alignment .s-card h4 has padding-left: 10px; to separate the text from the image. This is fine if the spacing looks good in your layout. .s-card img { height: 40px; width: 40px; } sets fixed dimensions for the image, which might work depending on the design. Ensure that the images you use fit these dimensions well. Potential Issues to Address: Responsiveness: Your layout is fixed in height and width. This might cause issues on smaller screens or when resizing the browser window. Consider using percentages, Flexbox, or CSS Grid to create a more responsive layout. Box Shadow: The current box-shadow can be improved for a more natural look. Consider box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25); for a subtle effect. Absolute Positioning: position: absolute; with transform: translate(-50%, -50%); is an older method for centering. Modern layouts often use Flexbox for easier and more flexible centering.

  1

  ---

  

  Amr-Atef-k•30

  @Amr-Atef-kPosted 2 months ago

  @Citycod wow thank you so much for your time and effort , you really helped me🙏🙏

  0