Huddle landing page

Community feedback

• 

  Roman Filenko•3,335

  @rfilenkoPosted over 4 years ago

  Hey, your code isn't well organized and needs refactor, in some places there some weird mixes of different styles. First thing first - disable all styles regarding layout - don't set position: absolute; on element, don't set margin, padding in %.

  I've commented not needed styles for page elements. Start from those, try keep it simple, start, from mobile, then add more needed styles with bigger viewport width. Hope this helps, look thought those changes😉, Roman.

  .top-container { /* height: 77%; / width: 100%; / position: relative; / } .top-left { / margin-left: 6%; / / bottom: 30%; / / height: 70%; / / width: 32%; / / padding-top: 30px; / / position: absolute; / } .top-right { / position: absolute; / / padding: 3% 5% 3% 3%; / / top: 0; / / right: 0; */ }

  .mockups { display: flex; /* width: 55%; margin-top: 8%; margin-left: 45%; */ }

  /***************** MIDDLE CONTAINER AREA ************/ .middle-container { / height: 210%; / / width: 100%; / background-color: white; flex-direction: column; display: flex; justify-content: space-around; align-items: center; margin: auto; / position: relative; / / padding-top: 5%; / / padding-bottom: 17%; */ padding: 0 15px; }

  .info { /* height: 25%; / / width: 89%; / / display: flex; / / flex-direction: column; / box-shadow: 3px 3px 15px lightgrey; border-radius: 40px; / justify-content: center; */ margin-bottom: 2rem; padding: 1rem; }

  .float-right { /* height: 300px; / / position: absolute; / / margin-left: 55%; */ }

  .info img { /* height: 300px; / / position: absolute; / / margin-left: 6%; */ max-width: 45%; }

  .text { /* margin: 0 50% 0 10%; / / position: absolute; */ }

  .text1 { /* margin: 0 0 0 50%; */ }

  /***************** BOTTOM CONTAINER AREA ************/ .bottom-container { / height: 62.25%; / / width: 100%; */ background-color: #00252e; position: relative; color: #ebfbff; }

  .float { display: flex; flex-direction: column; /* position: absolute; / / height: 30%; / / width: 54%; / background-color: white; border-radius: 30px; vertical-align: center; z-index: 1; align-items: center; box-shadow: 5px 5px 20px rgba(105, 105, 105, .31); / top: 305%; / / left: 23%; / / padding-bottom: 20px; */ margin: 1rem; padding: 1rem; }

  .inner-float { /* position: relative; */ / * top: 35px; */ }

  .list-icons { /* margin-right: 2%; */ }

  .address { display: flex; justify-content: center; align-items: center; /* width: 400px; / / left: 15%; / font-size: 0.80em; / margin-top: 15%; */ }

  2

  ---

  

  Shylie•70

  @shylietaraPosted over 4 years ago

  @rfilenko thanks! I'll give it a try :)

  0