Responsive Advice Generator using Flexbox

Community feedback

• 

  Josh Javier•830

  @joshjavierPosted over 1 year ago

  Hello @MrNikaa! I checked your solution on my iPhone SE and indeed the button is placed at the bottom edge of the screen. To fix this, you can position the button relative to the card like this:

  .card {
  position: relative;
  }
  
  .roll-button {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  /* Remove the margin-bottom */
  }
  

  You can remove the .roll-container which is adding a huge gap at the bottom half of the card. https://ibb.co/HC8Mv8L

  Also, I noticed that you used a lot of media queries to adjust the font size and spacing of multiple elements. In general, avoid doing this as it makes your app more difficult to maintain and debug. Start with a mobile-first approach, and then only add breakpoints when your design "breaks".

  For example, you can avoid setting fixed width and height in multiple breakpoints if you only set a max-width in your card, like this:

  .card {
  max-width: 40em;
  margin-inline: 1em; /* Add side margins on smaller screens */
  padding-bottom: 4em; /* Add enough space to separate the button from the divider */
  }
  

  Last tip: the alt attribute doesn't always have to be a description of the image. If the image is used for decorative purposes only (like the visual divider), the alt attribute should be empty. If the image has a specific function (like the button), then the alt attribute should describe the function of the image, e.g. alt="Generate new advice". For more info, I recommend checking out Alt-texts: The Ultimate Guide and the W3C alt Decision Tree.

  Hope it helps, happy coding!

  Marked as helpful

  1