social-proof-section

Community feedback

• 

  Manoj Kumar Singh•970

  @dev-mksinghPosted 9 months ago

  Hey @diwakharpandyan , nice to see improved and better code this time from you. I'm here to point out two things, first i'll answer you and secondly i will tell you a very minor but important thing you need, to improve in this project :

  • First thing first, its really good that you pointed this question, see there are other ways as well i'm mentioning two major ways okay?

    a) You can use Javascript to create the same. With help of DOM(Document Object Model and function.

    b) Now because sometimes your script might face issues to load, you can use components, for this you can choose Frameworks, like React or Angular.

  • Second point is, If you resize your project screen the feedback (the testimonial class element) content doesn't maintain the margin or padding with the border and sometimes it overflows.. For example resize the page to 656px or 660px you will notice.

  I hope this is helpful.

  Marked as helpful

  1

  ---

  

  Diwakhar•460

  @diwakharpandyanPosted 9 months ago

  Im yet to learn JavaScript.. thanks @dev-mksingh ... And for responsiveness, I thought there were no devices with such screen size(660px) so I didn't optimise... Optimized for 375px to 640px that covers majority of mobile devices...next time I will also optimise for the devices with medium screen size...

  0

  

  Manoj Kumar Singh•970

  @dev-mksinghPosted 9 months ago

  @diwakharpandyan when i pick random sizes like here i said 660px, it doesnt mean i'm talking about particular screen. But you never know which resolution of the screen will be people looking at. Right? for example, if i split my screen and one side i'm working on IDE and other side my browser is open, now i want to resize the screen so that IDE should occupy more space, that time browser won't resize to particular mobile size screen right???? Considering this we should layout in such a way that even if you dont mention screen size in responsiveness. Still the content should be in good view and proper. I hope im clear now.

  Also optimizing doesnt mean you need to mention all the screen sizes available . Here from optimizing i mean styling your page in such way that even if you dont optimize for particular size, still the page should flow properly.

  I'm just telling you so that it can be better coding and you will find that you have to write less and do more . Happy coding.

  Marked as helpful

  1

  

  Diwakhar•460

  @diwakharpandyanPosted 9 months ago

  Yea clear @dev-mksingh... So i should check for all layout breaking points and optimise the code for all those particular screen sizes right? In my case I should reduce font size, padding, margin to avoid content overflow isnt it?

  0

  

  Manoj Kumar Singh•970

  @dev-mksinghPosted 9 months ago

  @diwakharpandyan No you don't have to optimize the code for all the screen sizes, just stick with mobile-first approach, use relative unit lengths for elements, and understand media-queries bit more then you will clearly understand what i mean. Because when you use media queries then you are at point where you should feel to make code optimal even for range of screen sizes. for example: without writing code for screen size between 360px - 768px. How you will do it? in this case you have to simply use mobile first approach and then simply use media-query with min-width 360px. Like this you are not writing for screen size of 360px but you are writing it for screen sizes more than 360px , now this will include automatically screen size of 386px, 500px,768px, 1080px etc etc

  In your case you should use wrap all the elements in div or other tag and then use display : flex on their container. Also you will use min-height for the comment section. If you aren't clear you can see my code.

  Marked as helpful

  1