Skip to content
OverviewSolutions
3
Comments
5
frontendcracker
@arrKhange1

All comments

  • frontendcracker•100
    @arrKhange1Posted almost 2 years ago

    Hi, nice solution!

    Here what I’ve spotted:

    <div class="news-section__title__container">

    BEM says that element can’t have another element in it. In your situation title is already an element of news section, so it can’t be a block for container.

    The solution might be to put a hyphen after title instead of double underscore

    Marked as helpful
    0
  • frontendcracker•100
    @arrKhange1Posted almost 2 years ago

    Hello, cool solution!

    I would add some features as:

    1. Center a container (not all of your breakpoints have this option)
    2. When cards are arranged in a row on the laptop-like screen size, try also to place text within a button in a row to increase UX decreasing the length of text this way
    1
  • frontendcracker•100
    @arrKhange1Posted almost 2 years ago

    If it was question about how place your nav in the top right corner so that's it:

    Set a position:fixed and height:100% on your nav and then put in the top:0, right:0

    Now it will be sticked to your right side even if you scroll up and down

    0
  • frontendcracker•100
    @arrKhange1Posted almost 2 years ago

    Hi there! At first, we need a hidden nav. Of course, we already have a nav class with all its properties. So then we need to somehow hide it from the UI... Good, let's define a nav--hidden class with only display:none for simplicity in it and put it with nav together to get class="nav nav--hidden"

    Cool, we only see the burger icon in the top right corner now, but how to toggle this nav class?

    Right! Just get rid of nav--hidden in class="nav nav--hidden"

    Go to js file and define nav and burger elements so we can manipulate them

    Now just simply while we clicking on burger we need to change the state of our nav (assume it as turning on and off the boolean flag on the backstage)

    To do that in the burger event listener callback on click invoke nav.classList.toggle("nav--hidden")

    This construction stands for condition such as "If i see nav--hidden in classList, then i toggle it off, otherwise - toggle on. This way you can switch on/off your nav

    Yeah... this way you only toggle on your nav, but how to close it after?

    For this case, just simply add another close icon and do the same thing as before but inside the close icon event listener callback instead!

    Hope it was helpful advice. Happy coding!

    0
  • Ansly•290
    @Median21Submitted almost 2 years ago

    Hello! I have just finished the grid section. To be honest, it was hard. But there is something that is not quite right, when the right side becomes too long, the spaces on 2 of my grid sections becomes really big and ugly.

    Hoping for tips and advices! :)

    Responsive Grid Section

    2
    frontendcracker•100
    @arrKhange1Posted almost 2 years ago

    Hello! It's almost great solution but there are a bit features to add:

    1. As for your problem, I would reorder elements on middle screens or even start a medium screen breakpoint a bit further
    2. Also, you got a container wrapping your grid. It's alright but if you had it with such params as:
    width: 80%;
max-width: 1440px;

    or the tricky one that does the same:

    width: min(80%, 1440px);

    it would be 2 times greater cause this way you would limit the content width to increase readability and also avoid too expanded content on wide monitors

    Marked as helpful
    1