Skip to content
OverviewSolutions
6
Comments
74
P
Jessica
@perezjprz19

All comments

  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    I found this article very helpful I'm understanding how the different values work.

    Marked as helpful
    1
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    So your image is actually huge on my phone and I think that is because you hard coded the width and the height, so it's not adjusting to my screen size and it's overflowing.

    Could you try playing around with max-width instead of width?

    I also didn't add a height to mine. I let the content in the card decide the height.

    Here is my solution in case you want to check it out.

    Marked as helpful
    1
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    Você é muito bem-vindo!! Fico feliz em poder ajudar.

    Marked as helpful
    0
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    Hmm... your solution looks great. Just try giving the body

            height: 100vh;
       display: flex; 
       justify-content: center; 
      align-items: center;
    Marked as helpful
    1
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    Everyone is at different levels in their learning journey, but with that being said, you get out of these challenges what you put in to them, In my opinion.

    Eventually these challenges will be used to make it easier for us to find jobs through the creation of the hiring platform. So if that's your goal, then I'd recommend making sure your solutions are as good as you can make them.

    If that's not your goal, other coders might still see your submitted code and use it as a learning resource. So that's something to consider I think.

    Marked as helpful
    0
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    The color for the attribution is illegible, so you might want to consider changing the color since they would not meet accessibility standards.

    I would recommend using opacity and mix-blend-mode to get the color of the overlay closer to the design.

    Marked as helpful
    1
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    👋

    Looks good, but I think you need a bit of margin around your card so that it doesn't touch edges. Card touches top and bottom sides on mobile.

    Marked as helpful
    1
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    👋

    I used max-width for the card and the image, rather than giving it an explicit width value.

    You can see my solution here

    0
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    Hey there! 👋 it looks like the link to your code isn't working. Also adding a little bit of padding to the bottom of the card will give it a little more space between the text and the edge of the card, as in the design.

    Overall, good job!

    0
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    That's they way I do it, at least. I build all my code for mobile and then start increasing my viewport width slowly. When things start to look weird, I tweak my code and add media queries of necessary.

    You can see my solution here

    Marked as helpful
    0
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    Hi ToHX!

    I think your shadow looks fine based on the challenge comparison. However, the card does touch the edges of my phone screen so I can't really see the shadow. Some margin could help with that.

    Marked as helpful
    0
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    Your project looks good. Keep up the good work!

    0
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    The background images were the bane of my existence last night. I was up until 3am trying to get them right because they were creating a bunch of overflow. 🤣

    Ultimately, instead of positioning them in relation to the viewport, I absolutely positioned them in relation to the card and used the translate property to get them on the opposing corners.

    I still have some overflow, but not as much. The best solution? Probably not. The prettiest? Eeeeh, nah.

    I think your solution looks good, but I can't see your background bubble images on my phone very well, so maybe they still need some work. I saw other people using fixed positioning to get them were they wanted and I thought that worked well too.

    Marked as helpful
    0
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    I haven't done this challenge yet, but that looks a like a lot of media queries for what this is. I think I would approach this layout a little differently.

    • I would start by coding for a very small viewport.

    • I would probably use min(), max(), or clamp() to keep the width responsive as I grow my viewport.

    • only add a media query when things start to break... if absolutely necessary. I don't think you'll need as many considering it only grows up to a certain size

    • I think flexbox would work with this... I think possibly displaying the entire container as a flex column. Wrapping the Two bottom sections in their own div within the container and displaying it as a flex row...

    As I said I haven't tested this, but if you do try it, let me know what you think.

    0
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    👋Hi!

    [This article might helpful in choosing when to use padding vs margin]

    (https://medium.com/frontendshortcut/margin-vs-padding-c1fc8ea8bfaf)

    Marked as helpful
    1
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    Hi!

    Good job completing your first challenge ever!

    The card is a little too big on my phone screen though and extends a bit outside of the viewport when loaded, creating a little bit of horizontal scrolling. Not using fixed values might help with that.

    Marked as helpful
    1
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    Hi! @abdellahelaajjouri

    I didn't looked at your code and saw that you added two media queries.

    I started mine mobile first, as you did. However, I only used one media query.

    My process:

    I start the simulation for a very small device, such as the galaxy fold.

    I add all my HTML with semantic tags only adding and only adding divs where needed for styling.

    In the CSS I start working from the inside out, so fonts and colors and then container. I used flex or grid depending on the project to place items within the container.

    I remind myself the browser already has some responsiveness built in.

    I try to avoid using fixed widths as much as possible and don't usually add a height. I use min() and max().

    In responsive mode, I slowly increase my window size adjusting the values for min() max() as I go where needed.

    Then if things start to break I use a media query.

    I remind myself that with the challenges, we don't know how it should look at every size, so long as it still looks nice In the sizes in between, I don't worry too much.

    I don't know how to avoid media queries entirely, and sometimes go media query crazy as I try to patch things up 🤣 but I think my process is helpful most of the time.

    Marked as helpful
    0
  • P
    Jessica•880
    @perezjprz19Posted about 3 years ago

    Hi @SakibAhsan7 👋

    Good job with your solution. I just have a couple of pointers:

    • it is best to separate your css from your html file for maintainability and scalability. Not a big deal with the smaller projects, but it would be good to get into habit.

    • since "cancel order" is an interactive element, it should be either a link or a button.

    Happy coding! 😊

    Marked as helpful
    0