Skip to content
OverviewSolutions
31
Comments
8
A B
@ABojo

All comments

  • A B•900
    @ABojo

    I believe the address bar that is present on mobile devices is what's causing the card to be cut off. The two solutions that should work are: adding a height of 100% to the html element, or giving the body a height of 100dvh, rather than 100%.

  • A B•900
    @ABojo

    The project looks awesome, and you did a great job. I’ll try my best to help you with the dropdown issue you’re having.

    First, you want to give the dropdown buttons a position of relative. If you do that, each dropdown box will be positioned according to its parent dropdown button.

    You’d want each dropdown button to have the relative class like this:

    <li class="relative gap-1 flex justify-between items-center">

    Second, clicking any dropdown button will cause all of the dropdowns to be toggled at the same time, but you want each dropdown to be toggled separately. I looked at your code and each dropdown box is being toggled by the same piece of state. I would make a dropdown component, so each instance will have its own isOpen state, and that way only the correct dropdown will be opened.

    Also, it’s important to use a button element for your dropdown buttons because they come with important accessibility features included.

    If you need any more help, let me know!

    Marked as helpful
  • A B•900
    @ABojo

    You'd have to set a height of 100% on the html element if you want that to work. The html element is only as tall as the content inside of it so the body is just matching the size of the html element when you set it to 100%.

  • A B•900
    @ABojo

    Absolutely. The majority of the users browsing the web are on mobile devices so it's very important to make sure your website works for all screen sizes.

  • A B•900
    @ABojo

    The project looks great!

    The flickering is extreme because the container is being forced to grow when the notifications are rendered. It would be best if you sized the container so it doesn't have to grow as much when content is added. If you set a minimum height and a width/max-width the container will stay about the same size.

    Also, you could create greyed out notification templates to sit inside the notification container when the page loads. You could remove them by wiping the innerHTML of the container right before you render the actual notifications.

    Marked as helpful
  • A B•900
    @ABojo

    The project looks great! Here are a few suggestions to solve your problem.

    • You're setting the height of the card explicitly which stops it from growing to fit the content. You should remove the height you set on the card so it can grow and shrink according to what's inside of it.

    • The divider isn't moving down because you've set the position to absolute. When you set an element's position to absolute it is pulled from the document's flow and will be unaffected by other elements. If you want the divider to move down as the quote gets larger you should leave its position alone and give it a top margin to create some space.

    • Don't forget to use padding to control the space between the card's content and border. You've set a top margin on the advice number when it would be better to pad the card container. Padding will be helpful to create space between the divider and the button at the bottom of the container.

    If I wasn’t clear or you have any more questions feel free to let me know.

  • A B•900
    @ABojo

    I had the same problem when building this project. Fetch is caching and returning the previous response when you make requests too quickly.

    I was able to fix it with this: fetch(url, { cache: "no-cache", });

    Marked as helpful
  • A B•900
    @ABojo

    You have a max-width of 1200px on both the container and main__grid class that prevents them from filling up space on larger screens. I think it looks good the with the max width set where you have it but if you want it to take up more space you can go above 1200px or remove the property entirely.

    Marked as helpful