Skip to content
OverviewSolutions
33
Comments
27
Omprakash Rahangdale
@OmprakashR

All comments

  • Omprakash Rahangdale•900
    @OmprakashRPosted 5 months ago

    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
    0
  • ritu jha•60
    @ritujha19Submitted 5 months ago
    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
    @OmprakashRPosted 5 months ago

    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
    0
  • Omprakash Rahangdale•900
    @OmprakashRPosted 5 months ago

    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!!!

    0
  • Tan•180
    @Tanyaradzwa1999Submitted 5 months ago
    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

    1
    Omprakash Rahangdale•900
    @OmprakashRPosted 5 months ago

    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!

    0
  • Sonja Krafft•310
    @sonmikrafftSubmitted 5 months ago
    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

    1
    Omprakash Rahangdale•900
    @OmprakashRPosted 5 months ago

    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
    0
  • DoneWithWork•160
    @DoneWithWorkSubmitted 5 months ago
    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
    @OmprakashRPosted 5 months ago

    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
    1
  • Omprakash Rahangdale•900
    @OmprakashRPosted 5 months ago

    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 !!

    0
  • Omprakash Rahangdale•900
    @OmprakashRPosted over 1 year ago

    Hi,

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

    Thank You!!

    1
  • Omprakash Rahangdale•900
    @OmprakashRPosted over 1 year ago

    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
    0
  • Rohit Rajak•60
    @RoRajakSubmitted over 1 year ago

    I will really appreciate all your feedback for this project. what should I need to note down so that I will not repeat the mistake twice.

    Product review card

    1
    Omprakash Rahangdale•900
    @OmprakashRPosted over 1 year ago

    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
    0
  • Omprakash Rahangdale•900
    @OmprakashRPosted over 1 year ago

    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
    0
  • Kamu Marvin Baguma•20
    @marvo-giftSubmitted over 1 year ago

    I used a display grid. I feel great to say that I am doing the front-end mentor challenge as a practice and learning a lot from it. Any comments about this work is really appreciated especially on where to improve.

    2rd attempt Product preview card component

    1
    Omprakash Rahangdale•900
    @OmprakashRPosted over 1 year ago

    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!!.

    3