Tribute page top of the page issue.... i think

I started doing my tribute page. but something seems off… like when i put the screen on the right or left side everything is off. can anyone take a look.
thank you in advance

Hey @MaxClef, I think it’s really cool that you’re trying different CSS techniques like skew and opacity, but normally you want to finish with layout before applying effects and here you need to fix some stuff:

A) Layout shall consist of block elements that take up full width of viewport, like so:

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

Every other element should be a child of these primary elements

B) Inline elements shall be contained if they are not part of the text:

<div class="img-container">
  <img src="" alt="">
</div>

C) You have to keep all edge cases for max-width in mind: 320px and > 1366px
For example, if you have 4 elements in a row in the header - they might not fit into 320px, so you need to think of certain breakpoint where you would split it into 2 x 2 - but then you will have obvious problem: image under image…

sorry i’m new to this so I don’t understand the last point. you mean I shouldn’t put more than 2 elements in one line?
thank you for the help :slightly_smiling_face:

If they are bigger than 320px in combined width (with margin between them in mind)

1 Like

There are different strategies:

  1. Hide certain elements on smaller screens
  2. Change direction from row to column
  3. Control in table-/grid-cell fashion (must be used with care)
  4. Combinations of three above
1 Like