Submitted over 1 year ago

Responsive Advice Generator App with API

Alay kabir•110

@alaykabir

Preview site View code

This is a solution for...Advice generator app

HTML
CSS
JS
API

2junior

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•960
@Tryt4nPosted over 1 year ago
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
@alaykabirPosted over 1 year ago
@Tryt4n Thank you so much for the insights. I am grateful.
0

Please log in to post a comment

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