Skip to content
Submitted about 2 years ago

Advice Generator using HTML, CSS and JavaScript

Okute Wonah•150
@okutewonah
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

A really good project to practice API consumption. I had some problems with the screen sizing, I would appreciate some tips on media queries.

Community feedback

  • hamza•390
    @HamzaouladevPosted about 2 years ago

    hello @okutewonah

    here are some tips to make your component more responsive:

    1. always keep the height auto so it is up to the content of your component to set it, that way you wont run into overflowing issues.

    2. use padding to create the space you need here instead of height, i invite you to read up on the box model to learn more, heres an article about it.

    3. set the width of your component relatively eg: width: 90%; plus give it a max width with a set number eg: max-width: 800px; that way your component will be responsive in all devices

    hope you found this helpfull! keep hacking

    Marked as helpful
    1
    Okute Wonah•150
    @okutewonahPosted about 2 years ago

    @Hamzaouladev thank you Hamza for this knowledge

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord