MEHNOOR SHAHBAZ

Latest comments

• 

  shaheerahmedkhan•80

  @shaheerahmedkhan11

  Submitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I am proud that i used html tables effectively and next time i would like to try CSS Grid

  What challenges did you encounter, and how did you overcome them?

  I couldn't remove the borders on the last element of the table. I surfed the web for some time and eventually fixed this problem.

  What specific areas of your project would you like help with?

  I would like help with CSS particularly because I am rather new at it.

  

  Responsive layout using media queries

  #pure-css

  1

  20
  

  MEHNOOR SHAHBAZ•720

  @Mahnoor366880

  Posted 3 months ago

  Your solution is looking great! You're on the right track, and I can see that you've put in solid effort. Here are a few improvements to make it match the required result more closely:

  1. Background Color Adjustment

  The required result has a soft beige background, while your solution has a light pinkish shade. Update the background color to match the required result.

  You can adjust it in your CSS:

  body { background-color: #f3e5d8; /* Use this beige tone */ }

  2. Font and Text Styling

  The font in the required result looks slightly bolder, and the headings have a darker shade. Make sure you are using the correct font weight and colors.

  Example for the heading:

  h1 { font-weight: 700; color: #302d2c; /* Darker shade for better contrast */ }

  3. Card Shadow and Border Radius

  The required result has a smoother, slightly rounded card with a subtle shadow effect. Add the correct border radius and shadow for a polished look.

  Update your .card styling:

  .card { border-radius: 12px; /* More rounded corners / box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); / Subtle shadow */ }

  4. Spacing and Padding Adjustments

  The spacing between sections (especially between "Preparation time" and "Ingredients") needs slight fine-tuning.

  Increase the bottom margin of the "Preparation time" section:

  .preparation-time { margin-bottom: 20px; /* Adjust for better spacing */ }

  5. Nutrition Table Styling

  In the required result, the nutrition table has slightly different padding and text alignment.

  Adjust it like this:

  table { width: 100%; text-align: left; border-collapse: collapse; } td, th { padding: 10px; }

  You're doing an awesome job! These small refinements will bring your solution even closer to perfection. Keep up the great work!

  0
• 

  Asia Ashraf•980

  @asia272

  Submitted 3 months ago

  What specific areas of your project would you like help with?

  I would love feedback

  

  QR Code Component

  #pure-css

  2

  110
  

  MEHNOOR SHAHBAZ•720

  @Mahnoor366880

  Posted 3 months ago

  Hey Asia, Your project is already looking great! Just a few small refinements will make it match the required results perfectly.

  1. Card Border Radius: The required result has slightly more rounded corners. You can adjust it using:

  .card { border-radius: 15px; /* Increase this if needed */ }

  2. QR Code Size & Alignment: The QR code should be a bit smaller and centered properly. Try adjusting its width:

  .qr-code img { width: 90%; /* Reduce the size slightly / display: block; margin: 0 auto; / Ensure it's centered */ }

  3. Font Styling & Spacing: The heading should be bold, and the paragraph should have proper spacing. Modify it like this:

  .card h1 { font-weight: 700; /* Make the heading bold / } .card p { line-height: 1.5; / Improve readability */ }

  These small tweaks will bring your project even closer to the required results. You're doing an amazing job—just a little fine-tuning left! Keep going! 🚀❤️

  0

  Marked as helpful
• 

  seranok1337•200

  @seranok1337

  Submitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  i had alot of struggles aligning all the elements, probably because i couldn't use my brain since i was getting distracted by my "happy house"

  What challenges did you encounter, and how did you overcome them?

  i had alot of issues and i can't describe them all

  What specific areas of your project would you like help with?

  motivation to do more challenges

  

  Social proof section

  #tailwind-css#accessibility

  1

  10
  

  MEHNOOR SHAHBAZ•720

  @Mahnoor366880

  Posted 3 months ago

  Hey seranok, great job on your Social Proof Section! Your implementation is coming along really well, and you're on the right track. Just a few small refinements will help match the required results perfectly.

  ✅ Layout & Alignment

  Ensure the testimonials and star ratings are properly aligned. You can use flexbox or grid to evenly distribute them.

  Check if any extra margins or paddings are causing misalignment.

  ✅ Typography & Spacing

  Double-check font sizes, line height, and spacing to match the design.

  The text inside the testimonials should have enough padding to maintain readability.

  ✅ Responsive Adjustments

  In mobile view, ensure the layout stacks correctly and maintains a balanced spacing.

  If elements feel too squeezed, tweak the container widths for better spacing.

  ✅ Background & Colors

  Make sure the background color and section spacing match the required results.

  If any color contrast seems off, refer back to the style guide for consistency.

  You're really close to nailing the challenge! Just these small tweaks will make your project look polished and professional. Keep up the amazing work! 🚀👏

  0
• 

  P

  kilozdazolik•190

  @kilozdazolik

  Submitted 3 months ago

  What challenges did you encounter, and how did you overcome them?

  This project was very hard and still the responsive is not working very well, but I do not wish to continue for now. I want to do other projects as this project drives me crazy.

  What specific areas of your project would you like help with?

  The phone image somehow gets pushed down when in mobile view.

  

  workit page

  2

  10
  

  MEHNOOR SHAHBAZ•720

  @Mahnoor366880

  Posted 3 months ago

  Hey kilozdazolik , you're doing a great job on your project! The design is coming along really well. I noticed that you're facing an issue where the phone image gets pushed down in mobile view. Here’s how you can fix it:

  Fix for Phone Image Being Pushed Down in Mobile View

  1. Check Parent Container

  Ensure the image is inside a flex or grid container with proper alignment.

  If using position: absolute;, check if it’s inside a relative container to avoid unexpected shifts.

  2. Adjust Margin & Padding

  The image may be affected by excessive margins or paddings. Try using:

  img { margin: 0 auto; display: block; }

  Also, check if any surrounding elements have margins that push the image down.

  3. Use Media Queries for Mobile View

  If the image is positioned correctly on larger screens but shifts in mobile, add a media query:

  @media (max-width: 768px) { .phone-image { position: static; margin-top: -50px; /* Adjust as needed */ } }

  This ensures that the phone image stays in the right place on smaller screens.

  ---

  Other Improvements for a Perfect Match with Required Results

  ✅ Typography Adjustments – Double-check font sizes, spacing, and alignment to match the required results. ✅ Button Styling – Ensure button sizes, border-radius, and shadows are consistent across different screen sizes. ✅ Spacing & Layout – Maintain consistent padding and margins, especially in mobile view, for a polished look.

  You're doing a fantastic job—just these small tweaks, and your project will look spot on! Keep up the great work! 🚀

  0
• 

  Oluchi Onyeguke•290

  @lulublake

  Submitted 3 months ago

  What challenges did you encounter, and how did you overcome them?

  I had a major challenge with styling the input while in focus. I was supposed to use a gradient color when the input was active or in focus. I was able to do that, but I think the method I used restricted me from adjusting the border radius, and it made the input box rectangular.

  What specific areas of your project would you like help with?

  I would like help with adjusting the border radius of my input field when it's in focus

  

  Interactive card details

  #express#node#tailwind-css#jquery

  2

  00
  

  MEHNOOR SHAHBAZ•720

  @Mahnoor366880

  Posted 3 months ago

  You can adjust the border-radius of an input field when it's in focus using CSS. Here’s how you can do it:

  input { border-radius: 5px; /* Default border-radius / transition: border-radius 0.3s ease; / Smooth transition */ }

  input:focus { border-radius: 10px; /* Adjusted border-radius when focused / outline: none; / Optional: removes default focus outline / border: 2px solid #007bff; / Optional: changes border color on focus */ }

  Explanation:

  The border-radius property sets the rounded corners of the input field.

  transition: border-radius 0.3s ease; ensures a smooth effect when changing the border-radius.

  input:focus applies the new border-radius when the field is clicked or selected.

  This will make the input field's corners more rounded when in focus! 🚀

  0

  Marked as helpful
• 

  Riccardo•20

  @ricky0709

  Submitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  Im proud that i was able to recreate this project, since I've done it all by myself

  What challenges did you encounter, and how did you overcome them?

  Had a problem in loading the fonts and using the border-radius element

  What specific areas of your project would you like help with?

  fonts

  

  Social Links Profile

  1

  20
  

  MEHNOOR SHAHBAZ•720

  @Mahnoor366880

  Posted 3 months ago

  Hey ricky , great effort on your project! It’s very close to the required results, and with a few refinements, you can make it a perfect match. Here’s what you can improve:

  1. Card Size & Positioning

  Your project has a slightly larger card than the required results. Try reducing its width to match the second image.

  Ensure the card is centered properly for a balanced look.

  2. Button Styling

  In your project, the buttons are wider compared to the required results. Adjust their width to be more compact.

  The spacing between buttons in your project is slightly off—reduce the gaps to match the required results.

  3. Typography & Alignment

  In your project, the text inside the buttons appears slightly misaligned. Adjust the vertical alignment for a cleaner look.

  Ensure the font size, weight, and spacing of the name, location, and bio text match the required results.

  4. Card Border & Styling

  Your project has slightly more rounded corners. Adjust the border-radius to match the required results.

  Your project is already looking great! Just these small refinements, and it will perfectly match the required results. Keep up the amazing work! 🚀

  0