Skip to content
OverviewSolutions
22
Comments
4
eren
@erensarac

All comments

  • Branimir•240
    @brane10Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    Responsive Recipe Page

    3
    eren•300
    @erensaracPosted 7 months ago

    Congratulations! @brane10

    I reviewed your solution. Your solition looks great. I wanna help you with some feedback. First of all, You must have missed the margin at the bottom. Starting from the top, the recipe description paragh on the header, need a colour change. I suggest to add color: var(--neutral-wenge-brown) to p tag and in this section recipe tittle could be bigger then now. At the Nutrition section, paragragh color looks wrong like a at header. Also this paragragh font-size property looking wrong. And the last thing of my suggestions, you can change the text colour left column of the table. I hope my suggesttions helps you.

    Happy Coding!

    Marked as helpful
    1
  • eren•300
    @erensaracPosted 7 months ago

    Congratulations! @mayurDayal2000

    I reviewed your solution and It's looks good. I like it!

    Happy Coding!

    1
  • Zwelihlecomet2•90
    @Zwelihlecomet2Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    i am mostly proud that my media queries are a little bit getting better

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

    media queries..i always face challenges with media queries

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

    mostly media queries.

    used the display of grid to place the items/content at the center

    3
    eren•300
    @erensaracPosted 7 months ago

    Congratulations! @Zwelihlecomet2

    I reviewed your solution. I wanna help you with some feedback. In your solution, It looks like you used percentage units for width and height propertys. It's not something expected for responsive design usually. You should use relative lengths like a rem or em.

    For example. If you know your card length after the 768px (mobile). You can handle the challenge using the examples below.

    Example 1: You can use calc function for relative width. It will be 100% width but 2rem minus. If your root have 16px so it will be width: 375px - 32px and its mean your width will be 343px on 375px screen sizes. Your container already have grid and place-items: center. So It will be centered.

    /* It's for mobile */
.container-content {  
  width: calc(100% - 2rem);
  /* 2rem for giving space left and right. */
}

/* It's for desktop */
@media screen and (min-width: 768px) {
  .container-content {
    width: 24rem;
  }
}

    Example 2: But if you don't wanna full width on mobile (768px and below). You can use specific width, because we know the width on mobile. It should be near the 20rem. You should use margin-right and margin-left at this method to give space around the edges.

    /* It's for mobile */
.container-content {  
   width: 20rem;
}

/* It's for desktop */
@media screen and (min-width: 768px) {
  .container-content {
    width: 24rem;
  }
}

    Also you can use Flexbox at your container-content and texts classes to control your layout simply.

    I recommend these resources for you.

    You can browse my solution here;

    If you have specific questions, don't worry asking. Happy coding!

    0
  • Ankita Joshi•10
    @ankitajoshi060Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?
    • For the first time I have used figma without knowing how to use it
    • I have created this website using tag only but if i have to make changes then i will use grid or flex to design QR component
    • Successfully created responsive desing.
    What challenges did you encounter, and how did you overcome them?

    Learned how to design a responsive website

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

    I am looking for feedback on how I optimize my css code

    media query for responsive website

    2
    eren•300
    @erensaracPosted 7 months ago

    Congratulations! @ankitajoshi060

    I reviewed your solution. I really liked your first attempt at creating a responsive design. I have some feedback for you. In your solution, It looks like you used div tags for all texts. You can use h1 tag for title, p tag for description. In this way, your codebase will be easier to read and compatible semantic html. Also I have suggestions for your class naming, you should use descriptive names. text-1 and text-2 it doesn't explain the tags. In your style file, it appears that you've used absolute length units. For responsive design, it's recommended to use relative length units instead.

    I recommend these resources for you.

    Happy coding!

    Marked as helpful
    0