Loopstudios landing page. GRID, FLEX, SCSS

Community feedback

• 

  StarWolf•260

  @BParadowskiPosted about 1 year ago

  Hey, off the top of my head I have 2 suggestions:

  • Your page lacks vertical alignment - each component has a distinct, different inline-margin. To fix that I suggest you use a div with a "container" class. This is how it looks on my websites (I think it is inspired by Kevin Powell you can take a look at his videos as well):

  .container {
    width: min(
      var(--container-max-width),
      100% - var(--container-margin-inline-min) * 2
    );
    margin-inline: auto;
  }
  

  (the --container-margin-inline-min custom property changes based on screen size of course).

  • You try to achieve the "image overlap" effect by hard-coding width/margin/padding values. This is not responsive at all, for instance on my screen there is no overlap whatsoever. To achieve this effect I suggest you define a grid and place the picture and article tags inside it. Then use "grid-template" property to divide it. Finally you'd need to define "grid-area" and "z-index" properties on the picture and article elements to place them in whatever way you need.

  Marked as helpful

  1

  ---

  

  jetskeeter•180

  @jetskeeter1Posted about 1 year ago

  @BParadowski Thank you very much, I was indeed having trouble trying to center components to the middle, but did not give much thought to it. So, thanks for pointing it out for me and I watch Kevin Powell, he's got a lot of things related to CSS.

  1