Skip to content
OverviewSolutions
21
Comments
11
VladimirBrscic
@VladimirBrscic

All comments

  • Fluffy Kas•7,715
    @FluffyKasSubmitted almost 3 years ago

    Hey guys,

    I used this challenge to learn a bit about creating accessible toggle switches. I followed an awesome pen by Scott O'Hara and tweaked it so it fits the design.

    The design of this challenge was really lovely and I had a lot of fun playing around with the gradient and coming up with some custom focuses for the buttons. The Javascript part is probably not the most elegant solution but it works well, as far as I can tell. ^^

    If you see anything I have missed, I'd love to hear it, so feel free to leave a feedback!

    Thanks and have a lovely weekend everyone!

    Pricing component with toggle switch

    2
    VladimirBrscic•775
    @VladimirBrscicPosted almost 3 years ago

    Hi, your solution is very good and interesting. I have one question, why did you use "opacity: 0;" , "position: absolute;" to hide <input> and <legend> elements. Is there a specific reason to do so or it can be done with simple "display: none" on both elements? Maybe something about accessibility? Thanks.

    0
  • VladimirBrscic•775
    @VladimirBrscicPosted almost 3 years ago

    Hi, you do not actually need media queries here really...besides you could just move background-color from container class to <body> element. Generally for challenge like this (just a single card) you can set container width to around 85% and then max-width to some fixed width (like 500px for example).That way you'll have nice responsive site. Happy coding!

    0
  • Alfredo Brito•250
    @95FredoSubmitted almost 3 years ago

    Got stuck on applying the cyan overlay to the equilibrium image for a little while. I'm wondering if there is a way to apply the overlay with the :hover pseudo class? As it seems more straightforward to me but I couldn't get it to work with that method.

    NFT preview card component challenge hub

    2
    VladimirBrscic•775
    @VladimirBrscicPosted almost 3 years ago

    Hi, good strategy would be first make a dedicated parent element ONLY for image and overlay. That parent element will have position: relative. ".overlay" will, among other properties, have position: absolute, width: 100%, top: 0 and left: 0. This is just beginning. Now try to continue from here on your own, if you get stuck you can ask again for help. Happy coding!

    Marked as helpful
    1
  • VladimirBrscic•775
    @VladimirBrscicPosted almost 3 years ago

    Interesting, can you please explain me a bit more. Thanks.

    0
  • VladimirBrscic•775
    @VladimirBrscicPosted almost 3 years ago

    Hi, this is very, very good.

    0
  • VladimirBrscic•775
    @VladimirBrscicPosted almost 3 years ago

    Hi, you do not need to set width and max-width on <body> element, <body> automatically takes up all the width of the viewport. Also by using 'grid' layout method you don't need 'margin: 0 auto' on same <body> element. Grid takes care of centering the '.container'. All in all you did good work here. Happy coding!

    Marked as helpful
    1
  • VladimirBrscic•775
    @VladimirBrscicPosted almost 3 years ago

    Hi Peter, on <body> you may want to replace 'height' with 'min-height' instead. Furthermore on .container class you may want to remove 'grid-template-rows' property altogether because that is actually fixed height in working with grids. Happy coding.

    Marked as helpful
    1
  • John Idenyi•250
    @JohnIdenyiSubmitted almost 3 years ago

    This is my first challenge in frontend mentor. Please how do I create space between elements using flexbox. I had issues using flexbox to create more space between elements in my grid class. I would love the community to review my code, outline my mistakes and also recommend best coding practices to help me be a better a developer.

    Responsive Order summary component using flexbox

    2
    VladimirBrscic•775
    @VladimirBrscicPosted almost 3 years ago

    Hi, 'min-height' of for example 200px on let's say some container will ensure that it will be at least 200px tall. But if it has a lot of content inside it will grow taller. If you would set it to just 'height' of 200px it would always stay to 200px and would have scroll bar to adjust overflowing content. It's very good practice to almost always set height to min-height.

    0
  • John Idenyi•250
    @JohnIdenyiSubmitted almost 3 years ago

    This is my first challenge in frontend mentor. Please how do I create space between elements using flexbox. I had issues using flexbox to create more space between elements in my grid class. I would love the community to review my code, outline my mistakes and also recommend best coding practices to help me be a better a developer.

    Responsive Order summary component using flexbox

    2
    VladimirBrscic•775
    @VladimirBrscicPosted almost 3 years ago

    Hi, you did pretty good for first challenge and you used flex very well for centering the .container class element. I would suggest setting min-height: around 110vh on .container and .order-summary class element to width: 85%. That way you will have nice space around that main card in mobile view. Desktop view looks nice. Happy coding.

    Marked as helpful
    0
  • VladimirBrscic•775
    @VladimirBrscicPosted about 3 years ago

    Hi, your cards are styled pretty well but generally content needs to be centered on the screen. For example you can stretch <body> acros screen with min-height: 100vh and set background color here. Then you can center that preview section with flexbox by adding : display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 0; to the <body> element. All properties on preview section are not needed then. Happy coding!

    0
  • VladimirBrscic•775
    @VladimirBrscicPosted over 3 years ago

    Thanks a lot!

    0