Skip to content
OverviewSolutions
9
Comments
6
Nirajan Prasad
@behubj

All comments

  • Nirajan Prasad•190
    @behubjPosted over 2 years ago

    oye @ERNESTO-PANAMENO,

    Felicidades por completar un proyecto mas, lo hiciste muy bien.

    Tengo dos sugerencias para ti:-

    El primero es leer sobre semen ntic html y aplicarlos a sus proyectos

    Y el segundo es cuando ajusto el tamaño de mi pantalla a alrededor de 1440, el diseño se ve raro de arreglar y le sugiero que lo haga en su consulta de medios (ancho mínimo: 768 px;) { agregue el ancho máximo de acuerdo con cuando esté satisfecho con su diseño ( tal vez 1100px)}.

    Estoy usando el traductor, así que tal vez mis palabras se vean raras, pero espero que te ayude.

    0
  • Johnny•470
    @johnnysedh3llloSubmitted over 2 years ago

    (2nd Attempt)

    Hey guys, at this time I've completed all the challenges on Frontend Mentor that requires only HTML & CSS to complete.

    in this project, I initially found it a bit tricky to get the cards to stack as specified in the design but well, I used a lot of CSS Grid to get the design specifications. at some point, i thought it was a little too much Grid 😅 but I'm not sure so please feel free to tell me what you think of my code and solution in general. any advice on best practices would be really appreciated.

    Mobile First Responsive Social Proof Section Made With CSS Grid & Flex

    1
    Nirajan Prasad•190
    @behubjPosted over 2 years ago

    Hey Johnny Congrats you did very well

    I saw your code and i found one thing, When i open your solution on desktop it become too large and design looks messy to fix that you can create a "div" and center that "div" in that div you paste your "header" and "testimonial-section" then give the "div" to size when you satisfied with the design( like { max-width: 1220px;})

    Hope you like it, Happy coding...

    1
  • Eliot•50
    @AvatarxAangSubmitted over 2 years ago

    regarding the smaller screens, it didn't worked well, i did my best, and the font Fraunces for the price in large didn't worked as well. I would be very glad if someone viewed and commented on my code Thanks in advance...

    Add-to-Cart

    1
    Nirajan Prasad•190
    @behubjPosted over 2 years ago

    Hey Eliot,

    Well try, you tried your best to complete your project, i appericiate that.

    I checked your code and i found some mistakes if you want to make your "container" in between the screen then { remove (display, align-items, justify-content from the body tag) and for center your "container" { use position property to center a div (if you don't know about it you can google it )}

    I also found mistakes in responsiveness and also your image overlap each other try again you will do better

    Hope it will help you and if you want you can check my solution for this challenge.

    Happy coding...

    Marked as helpful
    1
  • Lisa T•40
    @lisacodesnowSubmitted over 2 years ago

    I found getting the height of the image in desktop view the most challenging.

    I tried using '100vh', something I had never used before and couldn't figure out how other solutions used it correctly.

    Everytime I set the height to the parent element instead of to the actual background element, it would enlongate the entire container and I would have a really long image and short text.

    And when I tried to set min-height: 100vh I couldn't see the image at all.

    So I just used image tags, gave each image its own seperate class, and set one to display: none and another to display: inline.

    Even though it worked I still had to finesse the height and set it to 40% instead of 100% so the container wouldn't be too long.

    The question is why can't the image be the same height as the text beside it, without adding a fixed height or guessing a percentage?

    I used flex to center the container on the main and cross axis, but in desktop and other mobile screen sizes I have all of this extra space at the bottom.

    Is there a way to get the card in the middle of the screen or will there always be extra space at the bottom?

    Overall, this was a fun project and a great intro into coding. Can't wait to do more.

    Responsive Card using Flexbox

    3
    Nirajan Prasad•190
    @behubjPosted over 2 years ago

    Hey Lisa, Well try you tried your best to complete your project, i appericiate that.

    If you want to center your "container_wrapper" you have to fix your code{ Do (html,body: height-100%;)} it will fix your code and your <div> comes in center horizontally and verically.

    Hope it will help you and if you want you can check my solution. Happy coding...

    Marked as helpful
    0
  • Madu Jang•340
    @MJspittaSubmitted over 2 years ago

    I use Atom for my projects and CSS Lint report keeps prompting me that, "The universal selector (*) is known to be slow". I usually set my margin and padding to 0 in the selector. Is there an alternative to this selector that will still help me achieve the same purpose?

    Product preview card component

    2
    Nirajan Prasad•190
    @behubjPosted over 2 years ago

    congratulations for your new solution:- Your solution is good, the animations you've add make this even better.

    As a beginner you have to find a way improve yourselves. In this project you have done very well, the only thing i would suggest you work on sizing( between 375px-490px your image is shrinking inside of the another div)

    I hope this helps you and happy coding!

    0
  • Nirajan Prasad•190
    @behubjPosted over 2 years ago

    Hey Jose, very well done! I can relate to your comment, but i would suggest you give some time to your projects as i can see in your project the height of the main content is too big .

    I am also in learning stage, but I highly recommend taking your time to understand what exactly the code does (Note:-Google is your best friend).

    0