All comments

• 

  Julius Mcbraham Paapa-Boateng Somuah•230

  @khophisnowSubmitted over 1 year ago

  Which areas of your code? My JavaScript code was very lengthy. If there is a shorter way or any other suggestions it will be of much help. All feedbacks are welcome Thank You.

  

  Age-Calculator-App

  1

  50
  

  P

  Stelko•310

  @StelkoooPosted over 1 year ago

  Hey Julius,

  I went to preview your submission and I was greeted to what looked like a functioning age-calculator but no styling.

  Here is a link to a screenshot of what I saw.

  Having a look at your styles.css file, I can see that on line 29 is where you started your media query for desktop styles.

  However, since you added and (max-width: 1440px), anyone like myself or others who have a monitor with a resolution of 1440px or higher see your amazing work without any styling. I would recommend to remove that part of the media so your styling does not suddenly disappear at large screen sizes.

  If you have any questions or need me to explain further, don't hesitate to reach out to me.

  Happy Coding!

  0

  This comment has received 2 repliesShow
• 

  Oluwalolope Adeleye•600

  @OluwalolopeSubmitted over 1 year ago

  I had problem making the image responsive using source sets. so i used it as a background image. Any tip is highly appreciated

  

  Responsive Product Preview Card using CSS Grid and Flexbox

  3

  70
  

  P

  Stelko•310

  @StelkoooPosted over 1 year ago

  Hey Oluwalolope,

  To make an image responsive you will need to wrap an img and source element in a picture element.

  Something like this:

  <picture>
  
  <=  )" srcset="">
  <img src="" alt="">
  </picture>
  

  The img element's src attribute should point to the main resolution of the image you would like to display. Then you add the source element with the media attribute, which is just like a normal @media query, and the srcset attribute which contains the src of the image you would like to display at that screen size.

  From there you can apply your styles to the picture and img element, no need to apply styles to the source element as all it's doing is pointing the img element's src attribute location.

  For more info have a look at https://www.w3schools.com/html/html_images_picture.asp

  Another tip I would like to add is about the border rounding of your container.

  Currently you have your herobox1 and herobox2 holding the styles for your border roundness. Another way you can do it from one element is by adding your border-radius to your container.

  At first you will notice that box your div elements do not have rounded corners, that's when you also add the CSS property overflow: hidden to your container to find any bits of your divs sticking out.

  You can have a read more about that here - https://learn.launchacademy.com/teams/public/curricula/free/lesson_groups/html_&_css:_advanced/lessons/css-border-radius

  If you have any questions or need me to explain further, don't hesitate to reach out to me and/or you can also look at my submission.

  Happy Coding!

  Marked as helpful

  0