Skip to content
OverviewSolutions
33
Comments
27

Omprakash Rahangdale

@OmprakashRNagpur900 points

Web Designer and HTML Developer, Responsive Design.-- Webflow, HTML5, CSS3, Tailwindcss, Bulma, Bootstrap, jQuery, Daisy UI

I’m currently learning...

Trying to complete all challenges without any uisng framework.

Latest solutions

View more solutions

Latest 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
View more comments