Responsive landingpaga with CSS flexbox

Community feedback

• 

  P

  Mikhail Lorenzo Aniel•230

  @lorenzoanielPosted over 1 year ago

  Good job on the general layout and look.

  a few things I noticed for improvement:

  • The component seems to break a little bit during transition from desktop to mobile. I noticed that the dimensions for main is not statically set which seems to be 'squeezing' all of the child elements within it and distorting some (img is a big one) during the breakpoint transition. One recommended fix is giving the main a fixed width and height dimension so it does not rely on the body -- percentages are convenient but using them everywhere for the quick fix idea of responsiveness might produce unwanted results when testing your component.

  • This one is more of a weird almost edge case scenario but when I was testing the component and reducing browser sizes I noticed that it would start to overflow. Make sure to consider overflow: scroll especially for the y-axis (overflow-y: scroll), the figma designs are usually pretty good with mobile sizes (width starts at 375px which is normally the smallest mobile device with the exception of galaxy fold at 280px~), this will insure that even if users were to shrink browser window to a height smaller than your component that, if you set static dimensions for each break point and include the overflow, users can still scroll to see all of your component and there will be no overflow. Depending on which framework or no framework you will have to check developer console for proper implementation of these techniques.

  Other Tips:

  • check figma design for breakpoints: usually dimensions are as follows (width): desktop(1440px), tablet(768px), and anything smaller is mobile. One good tip is to start with mobile size and work your way up. This way you can add new styles for the next breakpoint and it will not break your initial base styles for anything below the next breakpoint.

  • I noticed that you are still starting out and a good way to think about development is by making things modular including your code. Start with making a 'styles' folder and different folders for your components. For example you are styling a button, make a separate folder under 'styles' folder called 'button' and from there you can make separate css files for different variations for that button (cartbutton, loginbutton etc..) and simply import into your main css file, make sure to follow BEM naming conventions so you dont run into class naming conflicts. As you improve there will be other ways to organize and keep things modular depending on which route you want to go (react components, Sass/Less, TailwindCss, MaterialUI, etc.).

  Good luck on your front end journey fellow student.

  Marked as helpful

  1