Skip to content
OverviewSolutions
3
Comments
12
micky
@awwmicky

All comments

  • micky•400
    @awwmickyPosted over 4 years ago

    Hey check out what object-fit: contain/cover does on your img via CSS. It may help with the image to not distort. But this some good stuff!

    https://www.frontendmentor.io/solutions/baseapparelcomingsoonpage-html-css-grid-flexbox-variables-js-IHhHt8Dgz/preview

    1
  • micky•400
    @awwmickyPosted over 4 years ago

    Now this is some good responsiveness: mobile, tablet, & desktop 📱 💻

    my only comments are to adjust the the font size & add margin top/bottom the text content.

    good work

    https://www.frontendmentor.io/solutions/four-card-feature-section-html-css-grid-flexbox-variables-Yh-6Nb6Fj/preview

    0
  • micky•400
    @awwmickyPosted over 4 years ago

    Overall, solid work 🔥! I also like your hover effect on the buttons, hero section size, mobile navbar effect, & the smaller interaction effects.

    Here are some critiques to check out:

    • add some more top margin/padding on the service section, e.g. "we're different"

    • adjust the font size on the service section & secondary section

      • e.g: "snappy process, ...", "find out more..."

    • add some more bottom margin/padding on the secondary section, e.g. "find out more..."

    • for mobile responsiveness, the horizontal scroll may be popping up b/c of the padding/width (it makes the screen buggy)

      • may adjust the nav width: 97.25vw

    good work!

    https://www.frontendmentor.io/solutions/insure-landing-page-html-css-flexbox-variables-QbcNO01Cj/preview

    1
  • micky•400
    @awwmickyPosted over 4 years ago

    Since you got the desktop view looking sharp, a good challenge is to use media query on the four card layout for mobile view.

    0
  • micky•400
    @awwmickyPosted over 4 years ago

    Oh, the responsiveness is clean! But I think the header is causing some bug like the horizontal scroll-bar in mobile view. I recommend checking out 'object-fit'. It may fix that bug.

    https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

    0
  • micky•400
    @awwmickyPosted over 4 years ago

    Hey there! I like the mobile to desktop responsiveness you have going. A good challenge to add onto this would be to edit the four cards layout (media query) around 465px ~ 1100px.

    0
  • micky•400
    @awwmickyPosted over 4 years ago

    You definitely got the right idea for mobile & desktop responsiveness! The challenge I would give is to adjust the media query so the cards don't get squished when the page shrinks/grows.

    0
  • micky•400
    @awwmickyPosted over 4 years ago

    Such a good & responsive web page 🎴! I would say to adjust the media query. I see a bug/issue around '1050px - 1180px'.

    0
  • micky•400
    @awwmickyPosted over 4 years ago

    This a solid responsive web-page 🤟! The only thing I can say is to debug the accessibility issues & HTML issues.

    1
  • Mar•220
    @Mar5PlanetSubmitted over 4 years ago

    My question is this- I'm a fairly new developer and want tips on how I write my CSS code- am I writing too much CSS to make it responsive? maybe things will get easier once I learn Javascript better

    Insure Landing Page

    2
    micky•400
    @awwmickyPosted over 4 years ago

    Dang, the responsiveness is good 📦! The only feedback I can give is to figure out how to align the footer text & footer social icons centers. That is a small fix I see in desktop mode, when I shrink the page.

    0
  • micky•400
    @awwmickyPosted over 4 years ago

    From this challenge, this is hands down clean. And the card hover interaction is a nice bonus! 💎

    As a personal challenge, try making the cards responsive using max-width for mobile screens.

    1
  • micky•400
    @awwmickyPosted over 4 years ago

    I like the details you added, blue tints for each card's box-shadow!

    1