Social Proof Section using Flexbox and Grid

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted about 4 years ago

  Hi Sebastian It's quite normal to have a lot of divs in a complicated layout, but you want to make sure it's always intentional. And always ask yourself - is there a html element for this that has semantic meaning? e.g. your card body is a div at the moment, but should be a paragraph tag.

  I think you should revisit this layout, inspecting in dev tools and zooming your browser in/out. Start with mobile - like iphone 5 size - and work up. Watch what's happening to your contents and layout. You'll see content spilling out of containers / going off screen a lot at the moment (I'll add some screenshots to slack for you)

  One thing you'll definitely want to reconsider is your use of 100vh on a lot of elements. That literally means stuff can't go smaller or larger, which is not what you want. You may need a min-height 100vh somewhere, but it's unusual to need that on a lot of elements.

  As you inspect your layout in devtools (Firfox is great for this as it has a layout tab to see your grid / flex lines), it should help you methodically analyse what's happening and what needs fixing.

  I think that's a better way to learn than me just suggesting changes for you, but if you get stuck I can come back later :)

  Good luck with it

  1

  ---

  

  Sebastian•65

  @Basti576Posted about 4 years ago

  Thanks for the Feedback!

  I didn't inspected the layout for iPhone 5 because in the style guide it should be 375px for the mobile Desgin. Thats why its not good for smaller display sizes (I know that these cases should be checked for a website normally). I think for a width of 375px the layout is "ok" but not perfect at all.

  I often used vh and vw for body/div sizes because I thought thats the easiest way to get a "fullscreen" look for my pages eg. for a landing page. Instead of using vw and vh, do you have any alternatives?

  0

  

  T

  Grace•31,230

  @grace-snowPosted about 4 years ago

  @Basti576 it's not the fact that you're using those units that's the real problem. It's that you're setting that as an exact amount, not a min- or max- which means elements can't adapt. And you're setting heights or widths on a lot of elements that don't need anything because of default behaviour. So you're making the layout harder for yourself by this misunderstanding.

  And static designs will always be at specific screen sizes, but you still need to build for larger and smaller. For example my brand new laptop doesn't have a 1400px width screen even when viewed full screen. But the site should still look good.

  0

  

  Sebastian•65

  @Basti576Posted about 4 years ago

  @grace-snow I think I get your Point. Im now going through my Stylesheet exspecially looking at the areas where I used just „width“ and „vw/ vh“ I already found some divs where i changed the width and height to a min or max Attribute. And some divs where a height and width Attribute won‘t change the div, as you already said because of the default attributes of the Element. I will update the file as soon as i can and I it would be nice to get some feedback again 😊 Thanks for the help!

  1