Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
7

Ryan O'Hanlon

@Ryan-OHanlon140 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

PHP MySQL HTML CSS JavaScript

Latest solutions

  • NFT preview card component using CSS Flexbox and :hover


    Ryan O'Hanlon•140
    Submitted 11 months ago

    If there is help I would like with this project it would be to have a better understanding of the position attributes and if there is a better solution to achieve the same effect of creating the overlay over the NFT image because surrounding an entire div element with an element does not seem like the best solution.


    1 comment
  • Order summary component using CSS Flex


    Ryan O'Hanlon•140
    Submitted 12 months ago

    The area I would like help with this challenge would be being able to have a container element control the size of an image so that they both would always be the same size.

    I would of also like to know how to make the container and the child elements remain in a fixed position when the screen size is scaling up and down without having to set a hard size.


    0 comments
  • Testimonials grid section with CSS Flexbox and CSS Grid


    Ryan O'Hanlon•140
    Submitted 12 months ago

    If there is one area I still would like help with each project is to know, when should I start limiting the size of objects for each project.

    While I strive to match the mobile and desktop design pictures, I still struggle dealing with padding, margins and how to group HTML elements together and not take up the entire block. Sizing container elements so that it matches the challenge still elude me as I try to be a perfectionist.


    1 comment
  • Four card feature section with CSS Grid and Flexbox


    Ryan O'Hanlon•140
    Submitted 12 months ago

    The area I would like help from with this project is understanding how to stop the text and images from being responsive using CSS.

    I know I try and make an exact match of each challenge, but I can't stop the text from being responsive when the window size increases or decreases as seen in the mobile-design and desktop-design pictures.

    I would also like help with figuring how to figure out how big or small containers should be for each challenge. Because either I make them responsive or set a specific size and I don't know what's the best practice.


    1 comment
  • Product preview card component using @media and flexbox


    Ryan O'Hanlon•140
    Submitted 12 months ago

    What I need help with this project is to understand how to make every element in the HTML framework responsive.

    I still have trouble understanding what I should be doing to have the text or images inside an HTML element be responsive as the resolution of the webpage increases or decreases in resolution.

    Using div elements as containers and then using flexbox for each div element can't be the only solution. Because I don't know how to set a maximum size and then have it and the elements shrink when the resolution gets smaller. My designs always takes up the entire webpage unless I set a specific width and height in pixels but that removes the ability of the design to be responsive.


    2 comments
  • Recipe Page using Flexbox and @media CSS rule


    Ryan O'Hanlon•140
    Submitted 12 months ago

    I would like help with knowing how to figure out how to use margin and padding so that the desktop design matches the design document while being responsive. I don't know how to make the width of the main element be an exact match to the design document.

    The other issue I had with this project was the colors for the style guide. There were eight colors for this challenge, and I could only determine four colors. Even using a color picker did not match the hsl values as provided by the style guide.


    1 comment
View more solutions

Latest comments

  • Reuel VJ•80
    @rvj1
    Submitted 12 months ago

    Testimonial Grid | Responsive design

    1
    Ryan O'Hanlon•140
    @Ryan-OHanlon
    Posted 12 months ago

    This is an impressive use of only using CSS Flexbox and making breakpoints for both mobile and desktop. I would highly recommend taking the time to learn how to use CSS Grid as it can help you with placement of the container elements to be aligned.

    Your code is structured well separating each testimony container in its own class but it can be improved as some testimonies are nested in each other in your HTML when they could be a child of the bigbox class and not the longbox class. Limiting yourself to just CSS Flexbox will only make placing complex elements like these more difficult in the future. Which I see with Kira's testimony being mis-shapen when I adjust the width of the browser that causes the margin and padding to fall when the display goes past 1000px.

    Remember that when you need to place the entire body element in the center of the webpage to assign it the CSS attribute min-height with a value of 100vh.

    You'll be using CSS Grid and Flexbox together for future projects to obtain that responsive web design. Here's a site that helped me out understand grid. https://gridbyexample.com/examples/ https://www.joshwcomeau.com/css/interactive-guide-to-grid/

    Marked as helpful
  • Shivangam Soni•1,090
    @ShivangamSoni
    Submitted over 2 years ago

    Four-Card-Feature-Section

    2
    Ryan O'Hanlon•140
    @Ryan-OHanlon
    Posted 12 months ago

    Overall, very nice job on this challenge. You've made it responsive, and you utilized both CSS Grid and Flexbox.

    I'm having a bit of trouble understanding your HTML and CSS though. While you did structure your CSS well and showed me ways to use CSS that I never knew about using the style attribute in the DIV element. You could improve the HTML structure to make it more understandable using other HTML elements such as header and section instead of nesting multiple DIV elements and having to assign each one a class. Probably could find a way to streamline or reduce the amount of CSS yet achieve the same result.

    The one thing I'm really impressed by was how responsive you made every element that I could shrink the size of the page down to 70px and every element is responsive.

  • DKVyotu•80
    @DKVyotu
    Submitted 12 months ago

    Solucion para Card Responsive

    1
    Ryan O'Hanlon•140
    @Ryan-OHanlon
    Posted 12 months ago

    Excellent job making the product page preview. It's an exact match down to the margin and padding of the text and button element.

    It's also impressive that you made CSS rules for the width of the page and set the absolute width of the desktop image by pixels. There's a lot I could learn from this to make my projects have better responsive design.

    I think the only thing I was surprised on was the choice of having the breakpoint for your @media rule for mobile be 600px. I thought the breakpoint was supposed to be set at 320 or 375px based on the styleguide.md.

    You certainly have a better grasp at using flexbox and writing your CSS rules having each class inherit the previous using &. Very well done.

  • cassiopeia•500
    @cassiopeia001
    Submitted 12 months ago

    Recipe Page

    1
    Ryan O'Hanlon•140
    @Ryan-OHanlon
    Posted 12 months ago

    A very strong match to the desktop design. While the code is well structured, it could do better with added comments to understand what each section of HTML or CSS is doing what.

    The color of Simple Omelette Recipe does not have any color attribute added from the style guide.

    While the site is responsive to the desktop design, the webpage does not change to match the mobile design. You need to make a second set of CSS rules for the desktop using the @media rules and apply a min-width. Then put all the desktop rules to adjust the margin and padding for inside the @media rule.

    /*Desktop CSS rules when wider than 375px*/
    @media (min-width: 376px) {
        body{
        }
    }
    

    Also very good using the margin left attribute to create space for all listed elements and the table.

  • cassiopeia•500
    @cassiopeia001
    Submitted about 1 year ago
    What challenges did you encounter, and how did you overcome them?

    i had a problem with the jessica avatar image not loading when i deploy on github pages, solved it by changing the path from /assets/images/avatar-jessica.jpeg to assets/images/avatar-jessica.jpeg.

    Social Links Profile

    1
    Ryan O'Hanlon•140
    @Ryan-OHanlon
    Posted about 1 year ago

    Overall, well done matching the solution cassiopeia.

    The dimensions are a bit off but that is a nitpick that I can't really offer proper feedback as I'm still learning how to match the overall size of the challenge to the solution.

    Two things I did notice though with improving your CSS. You added a hover rule to turn the social links to green but you didn't add a rule to change the color of the text to black.

    .social:hover{
        background-color: hsl(75, 94%, 57%);
        color: black;
    

    This will change the text to a black font when a user hovers over the buttons. Also we both need to change the pointer to black with a white outline.

    Also, don't forget to change the style of .attribution to a white font and assign the href to your website.

    Good job and keep up the good work.

  • chrisk71•50
    @chrisk71
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This was a fun challenge! I incorporated CSS grid and flexbox in order to expand my skillset.

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

    I had a much easier time positioning elements in this challenge vs QR code challenge.

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

    I'd like feedback on the HTML tags I used, as well as the CSS styling strings I used.

    Blog Preview Card

    1
    Ryan O'Hanlon•140
    @Ryan-OHanlon
    Posted about 1 year ago

    This is a really nice solution that is an almost dead-on match with the design.

    I wish I had some constructive feedback but it would only be nitpicks like how your solution is taller than the design. I couldn't even figure out how to match the font-weight of the text for "HTML & CSS foundations".

    Solid solution and keep up the good work.

    Marked as helpful
View more comments
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