Desktop-first, flexbox

Community feedback

• Account deleted

  Hi.

  I see you have some issues with page overflow which is causing a horizontal scroll to show up in certain screen widths. The problem is that you're setting a fixed width in most of the divs and you'll need to make 3 changes to solve this problem.

  Change 1

  If you set a width of 1440px in the container class, you'll get that width in all screen resolutions unless you use media queries but that's a problem because you need to guess the whole time what is the current resolution, and you'll end up using a bunch of media queries, obviously there are many ways to do it more efficiently. One of those is adopting the mobile-first concept or using CSS frameworks that adopt this design pattern like tailwind CSS, semantic UI, bootstrap, Bulma, etc.

  Having the previous mentioned in mind, the solution for the container would be replacing width: 1440px for max-width: 1440px.

  Change 2

  You have a class called content-wrapper but it has the same problem from above. the solution is removing the width from that class.

  Change 3

  In this case, the left-block and right-block classes are the ones causing the overflow because they have a fixed width. If you don't want them to shrink I'm afraid the only solution is to set a media-query with a breakpoint in max-width: 992px instead of 768px.

  Have you used the mobile-first concept? That workflow is quite fast to work with and you'll encounter fewer issues.

  I don't know if you're aware of this but the vertical alignment between the 2 blocks must be bottom-line as the design suggests it.

  Lastly, I recommend that you use the following in the container class

  .container {
       ...
      background-size: 100% 50%;
      background-position: bottom;
  }
  

  instead of

  .container {
       ...
      background-position: 100% 115%;
      background-size: contain;
  }
  

  This will ensure that the image will be always aligned with the boxes in the middle.

  If you apply what I just said, you'll get a design that is very similar to the original.

  I think that's my feedback for now and I hope it helps in any way. Feel free to ask if you need help with anything :)

  2

  ---

  

  Yulia Queen•75

  @YuliaQueenPosted over 4 years ago

  @juanmesa2097 Thank you very much for your feedback

  1

  Account deleted

  @YuliaQueen you're very welcome :D

  0