Responsive Social Proof Landing Page Using HTML, CSS

Community feedback

• 

  walmanjm•425

  @walmanjmPosted over 3 years ago

  hi,

  if you wanna stick around with your " margin" way ,

  you have to calculate the margin-bottom: margin-top: ,

  something like this :

  in your code, you put review-1 review-2 review-3 inside reviews ,

  the margin-bottom: of review-1 is should be margin-top: of review-3 ,

  and the margin-bottom: margin-top: of review-2 should be between ,

  in code like this :

  .review-1 {
    margin-bottom: 2rem;
  }
  .review-2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .review-3 {
    margin-top: 2rem;
  }
  

  we can say this the traditional way to what @alwodzicki suggestion with flexbox

  by the way take a look also in mobile its need some correction,

  and don't forget about the :

  bg-pattern-bottom-desktop.svg

  bg-pattern-bottom-mobile.svg

  bg-pattern-top-desktop.svg

  bg-pattern-top-mobile.svg

  happy coding 👍👌

  Marked as helpful

  1

  ---

  

  atanasov36•640

  @AtanasovCodePosted over 3 years ago

  @walmanjm Hi Walmanjm!

  Thank you for taking the time to help me improve my method of using the margin-top property to style and align the boxes. I ended up implementing @alwodzicki 's solution because as you mentioned too it is a bit better and makes the code easier to understand.

  I also took note of the mobile design and I believe I have fixed the issues there so now it looks and functions a lot better. I just had to change some things and I got it to work properly :)

  As for the background photos I didn't include them as I don't really seem to notice a difference with them and so I made the choice to leave them out, hope this isn't a very bad thing to do :)

  Thank you again I really appreciate it :)

  0
• 

  Ashley•75

  @alwodzickiPosted over 3 years ago

  I would suggest using flex-direction: row on your .reviews class to align the review boxes in a row. Then adjust the position of each review block using align-self.

  Apply the code to your container for the reviews:

  height: 350px;
  display: flex;
  flex-direction: row;
  

  You may need to adjust the height of the container to create the correct spacing.

  Then individually select each review and align it using the align self:

  First review box align-self: flex-start;

  Second review box align-self: center;

  Third review box align-self: flex-end;

  I hope this helps!

  Marked as helpful

  1

  ---

  

  atanasov36•640

  @AtanasovCodePosted over 3 years ago

  @alwodzicki Thank you Ashley this did help me out

  I used your suggestion and I managed to get the site to look and function a lot better than what it did before and I also learned a new technique so thank you for that also :)

  I did the same technique for the star reviews too and it worked on them too!

  Thank you again I really appreciate your feedback :)

  0
• 

  Tony Tang•215

  @FMcodingPosted over 3 years ago

  I would suggest the translate() method: https://www.w3schools.com/css/css3_2dtransforms.asp

  Marked as helpful

  1

  ---

  

  atanasov36•640

  @AtanasovCodePosted over 3 years ago

  @ForTestingStuffs Thank you Tony for your feedback, I wasn't aware of this method before but now I have added it to the list of things to learn and experiment with :)

  Thank you again!

  0