Skip to content
OverviewSolutions
20
Comments
51

Manoj Kumar Singh

@dev-mksingh970 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

Angular

Latest solutions

View more solutions

Latest comments

  • Manoj Kumar Singh•970
    @dev-mksingh

    Hello @MellonFive 👋 , good work there, but a minor advice from me, that maybe you didnt noticed or you might have missed it, if you notice then all your links like github, instagram etc, if you hover anywhere in that area rather on text then the cursor 👆 pointer disappear and also you will click and nothing will work. But if you hover over the text github etc then the page will refresh. So here's my solution this will work and will be more interactive:

    • First remove the padding from list classed .iten
    .social-card .itens .item {
  background-color: var(--Grey);
  margin-top: 2rem;
  font-size: 1.3rem;
  font-weight: bold;
  border-radius: .8rem;
  transition: .5s all;
}
    • Secondly, make the following change in your anchor tag within you <li></li>
    a {
  color: #000;
  text-decoration: none;
display:block;
padding: 1.2rem;
}

    I hope you can spot the difference after making the aforementioned changes. Mark this helpful if it is so. All the best.

    Marked as helpful
  • Manoj Kumar Singh•970
    @dev-mksingh

    Hey @aseptimu, Why you feel like your code is not working on screen-size 375px? Because i checked and its working fine as you wrote your code. From your second question i think you are confused between % and vh units. Right? See make one thing very clear that both are relative-length units , now the difference between them his:

    • % is basically for the percentage for the container element
    • vh is for the viewport of the screen;

    Viewport is the area your site appears on your browser or phone, whereas percentage is the width/height of the container element.

    I guess you get my point. Hope this is helpful to you. All the best.

  • Diwakhar•480
    @diwakharpandyan
    What specific areas of your project would you like help with?

    Hey guys! I have reuploaded the solution... Just confirm me whether the page is 100% responsive at all screen size ranges...thanks

    social-proof-section

    1
    Manoj Kumar Singh•970
    @dev-mksingh

    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
  • Manoj Kumar Singh•970
    @dev-mksingh

    Hey @andzz-zz, congrats on completion of your project. Here are the following points you need to look into:

    • Your project is responsive but not completely, try to resize your screen and you will find that on screen size between 378px -660px the list elements are overflowing.
    • After looking your code i'm sure you isn't using mobile-first approach and the consequence of that is you mentioned element size for small screens i.e. 375px
    @media screen and  (max-width: 375px){
  .container{
    max-width: 100%;
    margin: 15px 15px;
  }
}

    so you already set the width of container previously by max-width:20% by :

    .container {
  max-width: 20%;
}

    , now what browser understand is that, for smaller screen the size of the element will be 20% and for small size till 375px the element width is 100%. So setting max-width:20% for bigger screen is not required which you did here:

    @media screen and (min-width : 1445px) {
    .container {
      max-width: 20%;
      height: auto;
    }
  }
    • Okay so my last point might be surprising to you a bit, but simply set the max-width: 300px or width:300px for .container{} and remove max-width from1445px. you will find your code will work as you expect even for bigger screen. And you will have to write less code.

    I know this is long but read it carefully if still you don't get it, lemme know. Hope this is helpful. All the best.

    Marked as helpful
  • Manoj Kumar Singh•970
    @dev-mksingh

    Hey @Poojagoyal99, no doubt your output for large screen is good. But these are the following suggestions:

    👉 Your project is not responsive yet.

    👉 No layout for smaller screen(mobile screen)

    👉 No structured html page.

    👉 Your code lacks semantics HTML that's important in today's web tech

    Also i'd like to add, that first brush up your basics, try to get comfortable with CSS for now, then go for tailwind or bootstrap or postCSS or any other CSS framework. I'm saying this because though you used tailwind, the project is not responsive. So first learn CSS really well try to understand concepts like flex, grid you will find them a lot useful than getting your hands dirty in frameworks as beginner.

    I'm not demotivating or demoralizing you, just trying to make you get better. That's what we are here for right?

    Hope you will find this helpful. If any help needed feel free to ask. All the best

    Marked as helpful
  • Manoj Kumar Singh•970
    @dev-mksingh

    hey @keremenen nice try, and good work. But its not completely responsive or appropriate when you try to resize it. Try to resize the screen from 885px - 910px you will find that the buttons are not aligned . Kindly use flex properties by setting the proper height, padding, margin. or simply try to wrap the button in container, set the container height and then use flex align-items:center and justify-content:center and it should work. If you need any help feel free to ask.. Hope this is helpful . Happy coding

    Marked as helpful
View more comments