Skip to content
OverviewSolutions
7
Comments
8
Mel
@Mel1207

All comments

  • Mel•225
    @Mel1207Posted over 2 years ago

    Hi

    you can try this properties and target these class .price and .time

    • display: flex;
    • align-items: center;

    Hope it helps and great job for this work!

    1
  • Mel•225
    @Mel1207Posted about 3 years ago

    This is so cool both ui and ux, ✨ and all good at different screen sizes too great job bro! 😁 Im still learning react as of now, hopefully I can upload my 2nd challenge using react soon.

    0
  • Mel•225
    @Mel1207Posted about 3 years ago

    Everything looks good in all screen size, I think you can add a smooth transition on collapsing accordion for better ux approach. Overall its amazing nice work! 😃

    1
  • Mel•225
    @Mel1207Posted about 3 years ago

    Everything Looks good at all screen size. Nice work! and its true css variables are so great to use 😁

    1
  • Jade•20
    @jadedetervilleSubmitted over 3 years ago

    How can I get the ".column" text to centre in the "#metrics-columns"? For example, "80K" should be centred over "Followers". I tried a few flex solutions i.e. align-items, align-self in the .column but no luck. Guidance appreciated.

    HTML & CSS including Flexbox

    2
    Mel•225
    @Mel1207Posted over 3 years ago

    Hi,

    you can try to add text-align: center; at your #metrics-columns and inside your span .metrics try add display: block !important, I think it will work.

    Also your card lacks a little box shadow, but over all its good already, nice work!

    Marked as helpful
    0
  • Rachel•100
    @rboz1Submitted over 3 years ago

    Question about fitting content to a mobile device: when I load the page on my mobile device it fits to the screen perfectly. But I noticed that I have a small amount of "overhang" that allows for horizontal scrolling of the page. Any ideas how to get rid of this?

    Also would appreciate any other feedback, especially resources on how to get the shape of the mobile menu!

    Practice designing mobile first and with SCSS!

    1
    Mel•225
    @Mel1207Posted over 3 years ago

    Hi Rachel! great work on mobile layout 😀

    here are some issue I found:

    • Layout for desktop (1430px+ and higher): Text and background are not properly aligned based on the mockup you can try check them on your project files.

    • Missing triangular point at the top of your toggle menu. you can check that on google just search css triangle and add it on ::before or ::after of your toggle menu.

    • You can add transition from hovers to make some smooth animations just for UI enhancement.

    1. You can use overflow-x property to hide horizontal scrollbar on your page.

    you can check my [solution] (https://www.frontendmentor.io/solutions/html-sass-and-gsap-for-basic-animations-UBpUkE2Sb#feedback) for reference.

    hope this would help. please upvote my comment if it does, thank you. happy coding 😃

    Marked as helpful
    1
  • Mel•225
    @Mel1207Posted over 3 years ago

    Great work Tony!

    here are some issues I found:

    1. check for some color accuracy, specially the yellowish background?
    2. check the layout for mobile, your navigation links should not be displayed on mobile, just the logo and hamburger menu.
    3. check the horizontal scrollbar at the bottom of the page. you can use the overflow property of css.

    Hope this would help, overall great! please upvote my comment if it does thank you :)

    1
  • rewolf•25
    @mimiflySubmitted over 3 years ago

    This was fun but also a lot of frustrations. Would love to know if anyone has better solution for the images scaling properly for different screen widths and for changing color of svg icons.

    HTML CSS JS

    2
    Mel•225
    @Mel1207Posted over 3 years ago

    Great work!

    try to add some transition from hover for smooth animations 😃

    0