Loop studio laning page

Hi Gideon, first off, well done putting this together 🙂

The main suggestion I have is to fix the responsiveness. I'm viewing this on a wide screen, and there's a huge white space on the right of the screen, which is due to the max-width: 1440px on the body. It is fine to use max-width: 1440px on the children container, but when you put that on the body, you are preventing it from stretching the content across the page, so be sure not to set max-width on the body. I also see that the images in desktop view are fixed in width and are not resizable, and it could be because you don't have a normalize/reset rule for images yet.

In short, here are some of things I'd do to make this responsive:

1. Remove max-width: 1440px from the body

2. Add a child container for header, main and footer, move all the contents to inside that container, and give that a max-width (or use width: min() to set the max width). You'd find this a much better option than adding a padding for each of them individually. If for whatever reason you don't want to use a container, you can also just use a combinator selector for now to see the difference:

   // With combinator selectors:
   
   header > *,
   main > *,
   footer > * {
      max-width: 80em;   // this limits the width
      margin-inline: auto;  // this centers the children containers
      padding-inline: 4rem;  // this adds padding when width is less than 80em
   }
   
   // With a container as direct child in header,  main, and footer
   
   .container {
          max-width: 80em;  
      margin-inline: auto;
      padding-inline: 4rem; 
   }
   

3. Add an image reset rule to allow the images to resize:

   img, svg, picture {
      max-width: 100%;
   }
   

Lastly, I suggest not using such huge 100px paddings to position your elements; even if they look good at the 1440px breakpoint, that really will give you problems for all the other breakpoints.

Hope this is helpful to you, and keep going!

Hey,

One thing that to me causes confusion is that on a mobile the text shows up as

IMMERSIV E EXPERIEN CES THAT DELIVER

(hoping that formats correctly), I'd suggest looking at making the font a bit more responsive. EDIT: I don't think it's formatted in the comment correctly but there is a line break between V and E and then N and CES

I haven't been able to review on a desktop right now. The code looks OK, one thing I notice is the navigation where you have 2 repeatin blocks one for mobile nav and one for desktop, in a larger environment this could cause confusion you should be able solve this behaviour using CSS and media queries