Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Advice Generator App with API

#accessibility#fetch#jquery#theme-ui#contentful
Alay kabir 110

@alaykabir

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • I found it difficult to integrate the API.
  • Still have to learn about async and await.
  • I am unsure of the javascript code for "JSON", "fetch" and "then" as I had to take help from the internet.
  • How can I improve my css responsiveness?

Community feedback

Tryt4n 940

@Tryt4n

Posted

Firstly for your whole element you gave max-width: 25vw that's mean if you have mobile with width of for example 400px the element width would be 100px. You could do something like this:

min-width: 25vw;

max-width: 500px;

That's mean width would be 25vw but no more than 500px. Of course you can change those values.

Another thing add to your img line margin-inline: auto; because it's not centered. That's mean add the same amount of margin in the left and the right.

Last thing add text-align: center; to your whole element so the text content would be centered.

Marked as helpful

1

Alay kabir 110

@alaykabir

Posted

@Tryt4n Thank you so much for the insights. I am grateful.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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