Skip to content
OverviewSolutions
4
Comments
2
Musie Misgun
@Natty-tech

All comments

  • Levis Kim•1,200
    @Orekihotarou-kSubmitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    This is the second time I've done this particular challenge and I found the JS part of it so much easier than it at first.

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

    I had an issue with getting the drawers image looking like it does in the design

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

    I need help with getting the drawers image to look like it does in the design

    Responsive article preview component

    1
    Musie Misgun•40
    @Natty-techPosted 8 months ago

    Hello !, so I see your drawer image takes up always takes up almost half of the class called "article-preview". If you want to make the image smaller than the text part you can give the parent element the grid display and give the image lower "grid-template-column" percentage like the one below:

    //give article-preview grid display .articel-preview{ display: grid; grid-template-columns: 40% 60%; //this will make the image width smaller than the text }

    you can change the percentage however you like till you get the desired result! Hope this helps!

    0
  • Anwar Mestycer•420
    @AnwarMestycerSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    still need some work to make it completely responsive

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

    making it responsive to small screens was challenging.

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

    how to make responsive

    recipe-page

    1
    Musie Misgun•40
    @Natty-techPosted 8 months ago

    Hello👋

    Good job on the project! I can see you have used media query on your class ".card" element. But you can just use the max-width property and get rid of the extra media queries like the one below.

    .card{ width: "90%"; max-width: "600px"; /other properties .../ }

    /* this property will allow the card class to have a 600px width if the width of the browser is greater than 600px and will become 90% in size when the browser is less than 600px" */

    1