Build a Random Quote Machine

HTML-CSS
1

(Not sure if this goes on this forum but oh well)

Hi. I recently started the frontend library course, and even tho I haven’t finished it yet (still missing React/Redux) I decided to try doing the random quote machine and add that stuff later on. I’ve passed all user stories, except the one that says to center the #quote-box, even though it appears to be centered. (and yes, before you asked I tried full viewport at 100% zoom)

Proyect link: https://codepen.io/JP-CSStudent/full/pomLgaM

1 Like
3

It is asking you to center the element, not its content. You need the #quote-box element to have a width and be centered.

  1. wrapper is not a standard HTML element, and custom elements are inline by default. You can not give inline elements a width. So first you have to make it a block-level element, or set its display to block (or some other non-inline display type).

  2. Then you can give it a width.

  3. Now you can center it using an auto margin.

someCustomElement {
  display: block;
  width: 980px;
  margin-inline: auto;
}
1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.