Grid Testimonials Card in pure CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, upon loading the live site. The layout is very big and it pushed to the right side and scrollbar is at the bottom.

  My suggestion for this issue will be

  1. In your body tag, remove the height and width property on those. Instead use min-height: 100vh. This will allow your structure, the body, no less than the min-height and don't declare the height directly like you did now.

  2. Absolute. I see that you positioned absolute your .preview container which holds the whole component. I think it will be better for you not to use it, since it is huge component and making such a absolute is not a good idea. Making it just static or relative will be good so that the body tag will capture them, because right now, it does not since the .preview is absolute and out of the flow.

  3. Width. Your .preview has a declaration of width: 1440px, are you working on a large screen? But since a lot of users, like me, have lower dimension than that, we get a huge portion of the layout not visible and there is a scrollbar at the bottom. You could just omit that, or make a breakpoint in terms of that. Since lot of users have 1366px width ration in the desktop, that declaration of width causes such effect.

  4. Margin-left. You can just omit/remove the margin-left declared in your .container selector so that the grid itself, is placed directly centered.

  5. Breakpoint. It will be better if you made another breakpoint than just the mobile state. So that you could avoid elements squished or hidden via the viewport.

  But still, good job on doing this challenge, if you need more help about those mentioned, just drop your query okay^

  1

  ---

  

  Mick32453•350

  @nitrio346Posted over 3 years ago

  @pikamart

  Thanks, I appreciate your help.

  1. I've declared the width of 1440px, because I thought it has to be that size like I've read in README.

  2. I also am working on my 24″ desktop so I had trouble with adjusting my design to solution.

  3. I created that div .preview, because I was thinking the solution has to look like photo in folder desing, name desktop-preview.

  0