Loop studio laning page

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  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!

  Marked as helpful

  1

  ---

  

  Gideon Olumide Dada•240

  @Olumide2596Posted over 2 years ago

  @elaineleung thanks a lot for your feedback, will use this to improve my code😁

  1

  

  Gideon Olumide Dada•240

  @Olumide2596Posted over 2 years ago

  Hi, @elaineleung I've been able to make adjustments in line with your feedback and I can see a great deal of improvement in the final results. Thanks a lot😁. I'll appreciate further input if you find time to go through it again.

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @Olumide2596 It looks more responsive 😊

  I would remove the 150px side padding you have because it's no longer necessary since you have that container with the max width. I'd also not put a 100px padding in the VR-text, as right now at smaller browser sizes, it just looks really big and odd, and generally I would avoid such large sizes for paddings and margins in containers.

  Also, at around the 1000px breakpoint when I'm shrinking down the browser, the text in the gallery start becoming a bit covered and the height of the images start becoming uneven. To fix that, I think the best way is just to stretch the gallery items with flexbox, so I'd probably put a display: flex and flex-direction: column on the gallery item, and then in the img I'd have flex: 1. The images also look a bit distorted, so I'd put an object-fit: cover on them. Good luck!

  Marked as helpful

  1

  

  Gideon Olumide Dada•240

  @Olumide2596Posted over 2 years ago

  @elaineleung thank you, I will work on it😁

  1
• 

  Stefan Wright•60

  @stefanwright1988Posted over 2 years ago

  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

  Marked as helpful

  1

  ---

  

  Gideon Olumide Dada•240

  @Olumide2596Posted over 2 years ago

  @stefanwright1988 thanks a lot, I will work on it. 😁

  0

  

  Gideon Olumide Dada•240

  @Olumide2596Posted over 2 years ago

  @stefanwright1988 Hi, been trying to solve the repeating the nav block, and its been really tough, any pointers as to how to go about it?

  0