Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
44
Comments
6
Dennis Griffin
@dgdev1024

All comments

  • Dennis Griffin•1,320
    @dgdev1024
    Submitted about 4 years ago

    Calculator App - React.JS / SCSS

    2
    Dennis Griffin•1,320
    @dgdev1024
    Posted about 4 years ago

    Thank you. Right back at you!

  • Armando Guarino•540
    @guarmo
    Submitted about 5 years ago

    Responsive layout built using HTML5 and CSS3

    1
    Dennis Griffin•1,320
    @dgdev1024
    Posted about 5 years ago

    That's looking pretty good! Keep it up.

  • gusfoca•170
    @gusfoca
    Submitted about 5 years ago

    Single price grid component solution without media queries

    1
    Dennis Griffin•1,320
    @dgdev1024
    Posted about 5 years ago

    Viewport widths and viewport heights (vw & vh) are dependent on the size of your viewport - your screen. If that size is too big or too small, there's the possibility that the element using those will not appear correctly. If you are setting VWs and VHs for your element's size, I would advise also setting fixed 'min-width'/'min-height' and 'max-width'/'max-height' properties in order to alleviate that issue.

    Your bottom two panes don't seem to appear correctly on devices larger in screen size than a smartphone and smaller than a large desktop. Consider using a CSS Grid layout for your panes. You can use that with media queries to place your panes in such a way that they appear correctly, regardless of the viewport's size. You can learn more about CSS Grid here: https://css-tricks.com/snippets/css/complete-guide-grid/

    You're doing good, though. Good luck and keep it up!

  • Gülay Yolcu•510
    @gulayyolcu
    Submitted about 5 years ago

    Bookmark Landing Page -- Flexbox && Pretty Responsive

    1
    Dennis Griffin•1,320
    @dgdev1024
    Posted about 5 years ago

    Some of the elements in your page are a bit off-center. Try setting a 'width' property with 'margin: 0px auto' on your '.container' class, as well as a 'max-width' property for extra-large screens, like desktops. The 'auto' in the 'margin: 0px auto' property will apply a certain degree of horizontal margin on your block-level elements, such that they will center themselves.

    Also, your buttons show a border when you hover over them - you'll want to reduce the button's padding in that case to compensate for that border. For example, for a button with a padding of 16px that shows a 2px border when hovered over, you'll want to set a padding of (16px - 2px = 14px) in that button's ':hover' psuedo-class, in order to compensate for the border size.

    Very good work, nonetheless. Keep it up!

  • Onescu Radu•70
    @OnescuRadu
    Submitted about 5 years ago

    Fylo Data Storage Component

    2
    Dennis Griffin•1,320
    @dgdev1024
    Posted about 5 years ago

    On mobile devices, the 'Fylo' logo and control buttons are growing in size proportionate to your screen's width, to the point where the exceed the bounds of their container on large mobile devices, like tablets. Also, the negative top margin on the '185 GB LEFT' container is causing that container to cover up your storage remaining meter under the same circumstances.

    To remedy this, try adding a fixed 'max-width' property to your '.container' classes, and setting the 'margin-top' property of the '185 GB LEFT' container to a non-variable value, like '32px'. You may need to adjust these properties on your containers in your media queries, too.

    Very nice work, though. Keep up the good work!

  • Rafael Castellanos-Welsh•210
    @rafawelsh
    Submitted about 5 years ago

    HTML / CSS / JS

    2
    Dennis Griffin•1,320
    @dgdev1024
    Posted about 5 years ago

    That's looking pretty good! The use of HTML data attributes is pretty clever, too.

    One thing you could try doing is applying a transition to the 'color' and 'background-color' of your backgrounds and text, in order to give your page a smooth transition from light mode to dark mode.

    Keep up the great work!

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