Skip to content
OverviewSolutions
33
Comments
27
Omprakash Rahangdale
@OmprakashR

All comments

  • Omprakash Rahangdale•900
    @OmprakashR

    Hi,

    Congratulations!!

    I have some suggestions for the CSS media. No need to declare media as per the classes we can combine in one class.

    Now:  
@media (min-width: 90em) {
  .container {
    height: 100vh;
  }
}
@media (min-width: 90em) {
  .card__item {
    max-height: 100%;
  }
  .card__item__big {
    flex-basis: 34rem;
  }
}

Change TO :
@media (min-width: 90em) {

  .container {
    height: 100vh;
  }
 
  .card__item {
    max-height: 100%;
  }
  .card__item__big {
    flex-basis: 34rem;
  }


}

    this helps you to manage code and reusability and understanding.

    Thank you!!

    Marked as helpful
  • ritu jha•60
    @ritujha19
    What specific areas of your project would you like help with?

    I have a question --> why does my file looks different in edge and different in google chrome .

    in edge my files looks prefect but in chrome my files looks different its like look everything goes up .

    why does it happens ?

    i don't know it happens on only laptop or anyone else also so please, preview my solution if you see this so. Please give me feedback .

    OR

    if u know why its happened , then please let me know about this also and also u know how to resolved it , so please help me also to resolved it .

    blog - preview -card ->solved

    2
    Omprakash Rahangdale•900
    @OmprakashR

    Hi @ritujha19,

    Great job on your project! I have a few observations for your code that might help improve it:

    Add min-height: 100vh to the body to center the div. Remove the vh value and replace it with px values. Set the height to auto, and use max-height and min-height properties as needed. Additionally, remove the top margin. Hope this helps!

    Thank you!!

    Marked as helpful
  • Omprakash Rahangdale•900
    @OmprakashR

    Hi,

    Hi,

    Congratulations!! I hope you are doing well.

    I have some suggestions for your CSS work.

    1. Do not use a height of more than 100 vh for vertical viewport height. page body having 100vh, 100%

    2. use @font-face for customer fonts declare in top of the CSS @font-face { font-family: myFirstFont; src: url(sansation_light.woff); }

    use : .para,.paras{ font-family: myFirstFont; } or you can combine class for if you want to use same CSS properties for the same output ..

    CSS View port units:

    Thank You!!!

  • Tan•180
    @Tanyaradzwa1999
    What are you most proud of, and what would you do differently next time?

    arranging the page into sections, which is simpler and faster to do

    What challenges did you encounter, and how did you overcome them?

    positioning the contents of the social media icons

    What specific areas of your project would you like help with?

    is it a good idea to use the directives when working with tailwind css

    Responsive clipboard landing page using tailwindcss

    #tailwind-css
    1
    Omprakash Rahangdale•900
    @OmprakashR

    Hi,

    Congratulations!! I hope you are doing well.

    I have some suggestions for your Tailwind CSS work:

    There is no need to add custom classes like .button-container, .section-content, and others to combine CSS properties into one single class. Tailwind already provides a rich playground for responsive breakpoints. There are five default breakpoints, inspired by common device resolutions: Example: <div class="w-16 md:w-32 lg:w-48"></div>

    For more details, refer to the Tailwind CSS documentation on breakpoints.

    Using Tailwind's utility classes, we can achieve all possible combinations without the need for custom classes.

    I hope this helps!

    Thank you!

  • Sonja Krafft•310
    @sonmikrafft
    What specific areas of your project would you like help with?

    My screenshots seem to have a lot of white space below the content. Is this normal (for screenshots) or can I get rid of it?

    Social Links Profile with HTML and SCSS

    #sass/scss
    1
    Omprakash Rahangdale•900
    @OmprakashR

    Hi,

    Congratulations!!

    1st approach..

    1. add height to container { height:100vh;}
    2. as you add two main div's. .container and .attribution group in one div ..

    like ......................

    <div > <div class="container "></div> <div class="attribution"></div> </div> ..........................

    2nd approach..

    add 100vh height to the body and background using flex and grid to the body you can center a div and remove extra whitespace. also use the same group approach.

    Thank you !!!!

    Marked as helpful
  • DoneWithWork•160
    @DoneWithWork
    What are you most proud of, and what would you do differently next time?

    Proud of

    • learn a little about text-shadow
    • practised on layouts

    Next time

    • little more research on concepts applied
    What challenges did you encounter, and how did you overcome them?
    • Centering a div :)
    What specific areas of your project would you like help with?
    1. How can I more efficiently style this with less code and perhaps better and cleaner usage of CSS

    QR Code Card using Flexbox

    1
    Omprakash Rahangdale•900
    @OmprakashR

    Hi,

    Congratulations!! for trying this assignment and doing very nicely. I have some suggestions for you... don't use '<br>' for text start for new line. you can use calc(), and 'ch'

    using ch you can set the width of the character.

    https://www.freecodecamp.org/news/css-unit-guide/

    Thank you!!

    Marked as helpful
  • Omprakash Rahangdale•900
    @OmprakashR

    Hi, Add this code to your body CSS tag.

    ' body{display: flex; justify-content: center; min-height: 100vh; align-items: center; align-items: center;}'

    center a social profile section. also, you have to modify the 'main' section.

    'main{color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 12%); width: 295px; /* height: 900px; / padding-left: 80px; padding-right: 80px; padding-top: 0px; / margin: 400px; */ border-radius: 10px;}'

    thank you !!

  • Omprakash Rahangdale•900
    @OmprakashR

    Hi,

    Very impressive, as you use all units properly em, ch, and others with BEM ( Block Element Modifier ).

    Thank You!!

  • Omprakash Rahangdale•900
    @OmprakashR

    Hi, ** Congratulation!**

    As you mention no need to do responsive this challenge but need to add min or max-width in the .container class.

    as per mobile devices android and iOS are the same time this aspect ratio is changed as per viewport.

    and use can use min-height instead of direct height for the body. refer to this link https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4

    I hope this will help you.

    Thank You!!

    Marked as helpful
  • Omprakash Rahangdale•900
    @OmprakashR

    Hi, Congratulation!

    You did a great job!

    I have one suggestion for this.

    • update height to min-height:100vh;

    as you use the hieght:90vh viewport height the full viewport size is 100vh with included address bar.

    add min-height:100vh; in the body.

    Help link for the viewport. https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4

    I hope this is helpful to you.

    Marked as helpful
  • Omprakash Rahangdale•900
    @OmprakashR

    Hi, Congratulations!!

    I have some suggestions for this project, I hope this is helpful for you.

    • as we use width in view post. use vw (Viewport Width) not vh vh for height ( viewport Height).
    • please check your font location properly font src does not render properly.

    The rest of the code is fine but you need to check the height for the boxes.

    Thank You!!

    Marked as helpful
  • Omprakash Rahangdale•900
    @OmprakashR

    Hi, Congratulations!!

    You did a good job.

    I have some Suggestions for this task.

    • remove the margin:400px form you can center a div using flex and grid
    • need to center div with add this approched to main tag flex - body { display: flex; background-color: gainsboro; justify-content: center; align-items: center; min-height: 100vh; }

    using Grid - display: grid; place-content: center; min-height: 100vh;

    change midbox:margin:400px to midbox:margin:0 auto

    I hope this is helpful to you.

    Thank You!!.

  • Omprakash Rahangdale•900
    @OmprakashR

    Hi, ** Congratulations!!**

    Some observation

    • need to center div with

    flex - body { display: flex; background-color: gainsboro; justify-content: center; align-items: center; min-height: 100vh; }

    using Grid - display: grid; place-content: center; min-height: 100vh;

    • add an alt attribute to the image for better accessibility.
    • don't use fixed width and height use min and max

    I hope this is helpful for you!

    Thank you!!

  • Omprakash Rahangdale•900
    @OmprakashR

    Hi, Congratulations!

    I have some suggestions for this task.

    • add bullet li images ul { list-style-image: url('sqpurple.gif'); } or li::before { background-image: url("image_URL"); } With this approach no need to add images again and again.

    • add an alt attribute in the image tag, and add the width and height for best accessibility

    I hope this is helpful for you!

    Thank You!!!

    Marked as helpful
  • Omprakash Rahangdale•900
    @OmprakashR

    Hi, Congratulations!

    As are you using the flexbox approach, I have some inputs for this

    • in the container .container { text-align: left; margin: 2em auto; }

    you add margin:2em auto for the center container just update it into the margin:0px auto.

    • use for this also for the mobile view .lead-text add margin:0px auto. Or use can use this align-items: center; display: flex; flex-direction: column;.

    for center all components in centered for mobile approach.

    • use this code for a center entire container in the center's body{min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column;} after adding this use need to add some gap space in .reviews { flex-direction: row; margin-top: 3em; gap: 10px;

    I hope this is helpful to you.

    Thank you!!!!!

    Marked as helpful
  • Omprakash Rahangdale•900
    @OmprakashR

    Hi, Congratulations!

    You did a great job with CSS Grid.

    I have one suggestion for you. need to add one box for the content design in the proper section like need to add 'max-width' to the container to maintain the design aspect ratio.

    your code .container { margin: 1.6rem; } updated code .container { margin: 1.6rem; max-width:1170px; // you can change as per your design view}

    I hope this is helpful to you.

    Thank you!!

    Marked as helpful
  • Omprakash Rahangdale•900
    @OmprakashR

    Hi, Congratulations,

    I have some suggestions for this task.

    • use min-height:100vh instead of height:100vh This uses vh (viewport height) units to allow the body to set a minimum height value based on the full height of the viewport.

    • use em instead of px

    • need to add alt attribute to img tag.

    • * { margin: 0; padding: 0; box-sizing: border-box; } use this CSS to remove browser margin padding.

    I hope this is useful for you.

    Thank you!!!!

    Marked as helpful
  • Omprakash Rahangdale•900
    @OmprakashR

    Hi, congratulations!!!

    You are doing a grat job with Tailwindcss. as you mention are you facing challnege for resposive design with Tailwindcss.

    You code flex items-center justify-center gap-[30px] for top banner group dives find the same code in your html file.

    We need to add the flex-direction for the flex-row and flex-col mainly we can use min width approch in Tailwindcss so plese change a code

    flex items-center justify-center gap-[30px] flex-col md:flex- row chnages tthis approch for the other sections. for desktop its working in group and for mobile this is working in columns.

    flnd the media for tailwindcss

    I hpe this is helpful for you!!

    Thank You!!!!!!

    Marked as helpful