Skip to content
OverviewSolutions
20
Comments
51
Manoj Kumar Singh
@dev-mksingh

All comments

  • Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    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
    0
  • Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    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.

    1
  • Diwakhar•460
    @diwakharpandyanSubmitted 9 months ago
    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-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
  • Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    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
    0
  • Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    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
    0
  • Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    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
    0
  • Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    Hey @Greg-davi nice try, but its not fully responsive . Try to resize the screen and you will find that from screen size 801px -1115px the content is overlapping. I would suggest to use relative-unit length for the image or use flex by wrapping the image in a container, also set object-fit property to the image. Hope this is helpful. All the best

    Marked as helpful
    0
  • Rey•110
    @ReyCrisGitSubmitted 9 months ago

    What did you find difficult while building the project? The size for mobile and desktop. Should I use pixels or percentages and why?

    Which areas of your code are you unsure of? In .container for mobile and desktop size.

    Do you have any questions about best practices? Based on the code I wrote, any recommendation you can give me?

    HTML5 and CSS flexbox

    1
    Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    Hey @ReyCrisGit here to answer your queries :

    • You should use percentage unit when you have to make the elements grow or shrink when you resize the screen, using pixels will not do this and will always have fixed width/height that may cause overflow of the content on smaller screen.
    • You are unsure about container for mobile and desktop, because as i can see in your code, you have used the same properties in both places (for mobile and desktop). There was no need for such redundant properties if you would have defined it well in mobile version, only thing you would have needed in bigger(laptop etc ) screen was to change the flex-direction : row and might have to set the width.
    • Yes use mobile-first approach properly, it will make your code better and easier to work with. Rather defining properties for different sizes try to use DRY method. Also for bigger screen you used @media-queries (min-width: 1440px) do you think all laptop screens comes with this resolution? better would be media-queries (min-width: 768px)

    Hope this is helpful and you have your answers. All the best

    Marked as helpful
    0
  • Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    Hey @Ukpe2007, i understand the issue you are facing, here are some suggestions :

    • remove the height min-height from all three boxes.
    • set height of each element like h1 , p and button . After this set the padding and everything.
    • using flex is good but i dont think you went through it properly, why you didnt used, flex-direction: column for smaller screen?
    • also when you using flex you could have used flex-basis to set the width of the orange, blue and green.

    Don't rush just to complete the project, make sure your approach is clear.

    I'm not trying to demotivate you, dont get me wrong okay? I just want you to go through the basics first. Make sure you are comfortable with it. Then use appropriate properties.

    If you still face issues feel free to ask, also if you want you can see the same project i completed. Hope this will be helpful. Keep trying.

    0
  • Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    Hello @danniadelap, you did good. But some points:

    • Your project is not responsive, on smaller screen it should be on top of each other which isnt there.
    • If you resize your project screen less than 902px you will find that the buttons are not aligned.

    Hope this is helpful. If you need any help in this or other projects let me know. Happy coding.

    1
  • Pretty Kunene•690
    @nonozaSubmitted 9 months ago

    Hey coders,

    This is my solution for Pricing component with toggle.

    It was an awesome but challenging project I did when it comes to toggle, hence it was my first time creating it.I used a checkbox input type and manipulated with js to show and hide the prices. I am currently unsure with the use of id attribute on sass but I have used it but I know it not allowed. It would be awesome to get some input on this.

    I added some animation from AOS (animate on scroll :https://michalsnik.github.io/aos/) to the price component too.

    An overall, I would like to have some feedback on an overall project.

    Thanks Pretty

    Pricing component with toggle solution using Sass

    1
    Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    Hey @nonoza , first thing first, good work there. Congrats on your project completion. Okay so i found something that maybe you might have missed ,:

    • toggling is okay, but when you click monthly or annually still the toggling is working. For example, if you click on monthly once it the bar will come to monthly side, but again when you click monthly then the scroll is going to annually and the content is changing;
    • In my opinion the above mention thing shouldn't happen. It would be better either to write code for this, or you can simply keep it untouched and simply make scroll toggle, and then the content change automatically. That means, once you click on scroll it will move to monthly and content shown will be accordingly and again when you click on scroll then it will move to annually and again the content appears accordingly.

    I hope i made my point clear. Hope this is helpful. Happy coding

    Marked as helpful
    0
  • Diwakhar•460
    @diwakharpandyanSubmitted 9 months ago

    Hey guys.. I have set body height to min-height: 100vh in desktop view and for mobile view i have set height to fit-content; Pls correct me if its wrong.

    3-column-preview-card

    1
    Manoj Kumar Singh•970
    @dev-mksinghPosted 9 months ago

    Hey @diwakharpandyan good try there, but still there are places you need to improve and also on you question about height here we go:

    • Avoid using height until crucial. As setting height can spoil your structure flow and can lead you to specify height of all the elements within container
    • The main thing that you need to checkout is responsiveness, if you resize the screen you will find that on screen 630px to 912px between this the buttons or the structure disturbed. That's because of height thing.

    Try to complete this without using height on the body or main, and just use flex and relative-length units. If still you face issue feel free to ask help;

    Hope this will is helpful to you. Happy coding

    Marked as helpful
    1