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

Random advice API

Abrosss 440

@Abrosss

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


Hello. I am not sure if height and width of the container should be dynamic, depending on the random advice text or fixed?

Community feedback

Byron 2,180

@byronbyron

Posted

@Abrosss Looks good!

Your question is probably one for whoever designed it. I went with a fixed width, but I don't think it matters too much.

Few html/accessibility issues:

Your <section class="page"></section> element is probably better off being a <main class="page"></main> (Document should have one main landmark)

Also need a <h1> element somewhere inside your <section class="container"> (Page should contain a level-one heading)

Marked as helpful

2

Abrosss 440

@Abrosss

Posted

@byronbyron Thank you so much!

0
Omar M. 270

@OmarMAttia7

Posted

Hey, good job you did there 👍.

Like @byronbyron said your question is not technical it's more concerned with design.

But in case you want to make it a fixed width you should go with a percentage for smaller screens and a reasonable max width for larger ones. If your component is a flex item use vw instead of percentages.

Marked as helpful

1

Abrosss 440

@Abrosss

Posted

@hazel79 Thank you so much! I will try to make a fixed width too:)

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