Flexbox?!

Community feedback

• 

  Dusvy_M•390

  @dovelmPosted about 3 years ago

  yes, you must use flexbox in the div class = "container" like this:

  display: flex; flex-direction: row reverse; justify-content: center;

  or

  you can put the div of the image below the div class = "text"

  <div class="text">... </div> <div class="image">... </div> you can use figure for this image!!!

  Marked as helpful

  1

  ---

  

  dkvel•50

  @TheguydevPosted about 3 years ago

  @dusvimarin Thanks, I had no idea how to do that

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. The layout like what is stated is reverse right now and it is smaller than the design or the desktop state. The mobile state is fine but the responsiveness could be better especially you are using 1300px as a breakpoint for mobile layout which is too big for it, desktop view could use more of those, adjusting it would be really nice.

  Dusviry already gave great tips on this one and I agree with her with the row-reverse. Just some other suggestions would be:

  • It would be great to have a base styling with these properties

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  

  This way, handling an element's size will be lot easier because of the box-sizing: border-box. You can search up some more of how this works.

  • Right now, your body tag has no height since the main-content is being position: absolute which removes it from the flow. If you are just centering it, this would be a better approach, first remove all these properties on the .container:

  position
  top
  left
  transform
  

  and on the body tag add:

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  

  Right now the layout is centered properly but the sizing is still not proportionate, you might want to work or adjust on that one.

  • Adding aria-hidden="true" on an element that has alt="" so that it will be hidden totally for all users.
  • Your .box-numbers could have used ul since those are "list" of information about the company website.
  • Also, inside in those list information, those text should not be using a heading tag because they don't really give content on what the section would contain right, so better using p tag on them.
  • Lastly, the font you are using is different, check if the font is being used properly.

  Aside from those, great work again on this one.

  Marked as helpful

  0

  ---

  

  dkvel•50

  @TheguydevPosted about 3 years ago

  @pikamart Thank you for your feedback and suggestions, I've implemented some of it and it is already looking better, I will make sure to keep them in mind for future projects.

  1