Avatar for dgdev1024

Dennis Griffin

@dgdev1024

Mentor Score

900

I am a web developer with 3 years of experience so far, and a coding background of seven years elsewhere. I like using Node.js and React.js for development.

No solutions submitted

No solutions submitted yet

Latest Comments

  • RE: gusfoca's "Single price grid component solution without media queries" solution

    0

    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!

  • RE: Gülay Yolcu's "Bookmark Landing Page -- Flexbox && Pretty Responsive" solution

    0

    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!

  • RE: Onescu Radu's "Fylo Data Storage Component" solution

    2

    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!

  • RE: Rafael Castellanos-Welsh's "HTML / CSS / JS" solution

    1

    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!