Skip to content
OverviewSolutions
14
Comments
3
Vahid
@i-am-vahid

All comments

  • Vahid•160
    @i-am-vahidPosted about 1 year ago

    Hello

    Thank you for your opinion.

    I have used padding but I don't know why they are not applied in this case. You can see my design completely correctly with the Preview site option at the beginning of the page

    0
  • bacoder1•190
    @bacoder1Submitted about 1 year ago

    My first time using tailwind!

    This page does not work right with mobile.

    Unfortunately, i didn't figure out how to make this responsive with tailwind, so, what is the best way to build responsive designs with tailwind ?

    I also coded this desktop first, which probably made it harder.

    Results summary

    1
    Vahid•160
    @i-am-vahidPosted about 1 year ago

    Hello, I have checked your codes, Your design looks great on large screens. Tailwind is mobile first, so it is better to use this method to start coding, and also for the breakpoints in Tailwind, you can use Tailwind's own documents, I will give you the link to the breakpoints tailwind breakpoints

    In fact, you start with the design of the mobile phone first, and then you fix the inconsistencies that arise by increasing the size of the screen. For example

    <div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4">
  <!-- ... -->
</div>
    0
  • Aayush Jha•410
    @Aayush895Submitted about 1 year ago

    This is the very first project that I have worked on, so if I made any mistake that seems silly, please forgive me for that. The problem that I faced when building this component was mainly for the responsive design.

    1.) When I was designing the component for a device whose screen size was 375px and below, the 'result-component' or the purple section (for ease of understanding) of the component had the upper half portion hidden. Now I found a quick workaround for that by adjusting the top position of the component but, it affected some devices whose size was slightly greater than 375px. Although the effects were pretty minor, I would love to see a more optimized solution for this problem.

    2.) I would love to get some feedback on my code quality and would love to know if there was a better way to solve this problem or not. Also, I will be grateful to get my hands on some resources that can help me to improve my code quality.

    3.) I would also love to get an opinion on how to write better README files for the projects.

    A simple responsive Result Summary Component using HTML and CSS

    2
    Vahid•160
    @i-am-vahidPosted about 1 year ago

    Hello Aayush Jha I checked your code and I will write some tips for you to make this design more beautiful

    Place all the components in a main element like And give the main element a height of 100vh so that it covers the entire page Also, use flex to center the inner elements

    main{
height :100vh;
display:flex;
  align-items:center ;
justify-content:center;
}

    With this, you don't need position anymore and it will be fully responsive in the center. Use the maximum width instead of the width and set its unit to vw so that it will be enlarged according to the width of the screen in most displays

    #result-summary-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
max-width:45vw
}

    Instead of using a lot of padding & margin, try to use display flex and gap for parent.

    .result-component{
display: flex;
  flex-direction: column;
  align-items: center;
}

    if you want use padding use it for parent element.

    .result {
  display: flex;
  align-items:center ;
justify-content:center;
width: 10rem;
 height: 10rem;
border-radius:50%;
}

    To learn better, you can use the videos of Kevin Powell's YouTube channel or the website freecodecamp

    Be successful and hardworking

    Marked as helpful
    0