Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
10
Craig
@cchivers

All comments

  • Ynotlocin1•80
    @Ynotlocin1
    Submitted over 1 year ago

    Blog preview card using flexbox | Mobile-first workflow

    1
    Craig•190
    @cchivers
    Posted over 1 year ago

    Just a quick answer to your questions would be yes there is an easy way to do the transition. for example: (pulling from stack flow)

    @media screen and (max-width: 400px) {
        div { background: navy; }
    }
    
    @media screen and (min-width: 400px) {
        div { background: green; }
    }
    div {
        transition: background 2s linear;
        width: 400px; text-align: center; color: white;
    }
    

    The transition does not go into the @media query but instead into the element that is going to be changing via the media query.

    If you have any further questions please let me know and I can try and help

    Marked as helpful
  • P
    Chenxi•210
    @Chenxi96
    Submitted over 1 year ago

    Github User Search App with React & SASS & mobile first design

    #react#sass/scss
    1
    Craig•190
    @cchivers
    Posted over 1 year ago

    This looks really good, just some user experience ideas that you could maybe implement.

    clicking the @(username) could take you to the GitHub user GitHub page. The four prompts at the bottoms could take you to different fields, you could take user to GitHub page, or to location using an api location or just post request to google maps and sending the user to the google page that returns.

    Looks really good and appeared to be very good when it comes to responsiveness.

  • Alejandro Pino•10
    @alegratis
    Submitted over 1 year ago

    Recipe site usi ng HTML and CSS

    1
    Craig•190
    @cchivers
    Posted over 1 year ago

    Looks really good...good job with everything. I would drop the weight down a little bit for the font but everything looked really good

  • P
    Gab•170
    @gab-holik
    Submitted over 1 year ago

    QR Code Component Challenge

    2
    Craig•190
    @cchivers
    Posted over 1 year ago

    Looks really good, I would drop the font-weight of the heading. Other than that it looks amazing. Keep up the great work!

    Marked as helpful
  • PROMISE UZOR OKWUDIRI•660
    @upovibe
    Submitted over 1 year ago

    Qr-code-component

    3
    Craig•190
    @cchivers
    Posted over 1 year ago

    Awesome job, this looks really good!!

    Marked as helpful
  • Daniel Nunes•50
    @danielnunes13
    Submitted over 1 year ago

    Simple Qr code container

    2
    Craig•190
    @cchivers
    Posted over 1 year ago

    Awesome job, I would say with the code: Something this small does not need to be broken down into different files. You had 2 css files for the project that are involved in this project/challenge. The reset css file is ok and I think you should slowly get away from using to help teach about how to manipulate different CSS and how they interact together.

    Marked as helpful
  • Edikan•10
    @eeakpan
    Submitted over 1 year ago

    QR Card Component | HTML and CSS

    2
    Craig•190
    @cchivers
    Posted over 1 year ago

    One of the best ways to center a card would be.

    (html parent element) {
        display: flex;
        align-items: center;
        justify-contents: center;
    }
    

    For the justify-contents you need to make sure you have a height set for your parent container. This will center an item.

    Another pointer if you want to move your tag to the bottom is:

    .attributes {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    

    I do this just to move the attributes tag to the bottom of the page and out of my way.

  • P
    Elina Shelest•150
    @evengene
    Submitted over 1 year ago

    React and TypeScript in Action: A Pomodoro Timer

    #react#typescript
    1
    Craig•190
    @cchivers
    Posted over 1 year ago

    Awesome job and looks amazing. My only feedback is against the design but would be that you could click anywhere in the starting circle to start and stop. That was the first I did was click in the middle on the time with no changes and it was not till later that I noticed the Start button.

    It would also be cool if the color of the time ring changed depending on factors, whether that be on a break, or what not.

    Another thing about the responsive to your site was that if viewing on a tablet or wide screen but not much height the page kind of breaks a little and I had to find the settings button by scrolling down. I think a single page site with one function like this should have everything viewable at all times, no matter the size of the screen.

    Over all it was a great looking site.

    Marked as helpful
  • Obiny•150
    @obinysol
    Submitted over 1 year ago

    Responsive recipe page using flex, grid, and media queries

    1
    Craig•190
    @cchivers
    Posted over 1 year ago

    @obinysol

    First things first your colors look really good. I would say that your line spacing looks a little off. I don't remember what the size is off the top of my head but I can look it up for you if you really want it.

    When it comes to screen size I would keep it as small as can be and then grow it from there. Remember that you want to accommodate as many screen sizes as possible and as such go low then work you way larger.

    For example I set my smallest at like 350px and then made sure that everything grew until I got to a max size that I wanted. Planning for all cases is the smallest option, is what I was taught, and then realize that you can always go bigger, but never smaller.

    Marked as helpful
  • Natalia•120
    @NataMellado
    Submitted over 1 year ago

    Responsive Recipe Page using CSS Flexbox and Media Queries

    1
    Craig•190
    @cchivers
    Posted over 1 year ago

    Awesome job, I actually learned something reading your code as I just did this challenge as well. I forgot about the :marker and did not use it and ended up doing it a very crude way.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub