Skip to content
OverviewSolutions
13
Comments
13
Carlos Chaves
@sircarloschaves

All comments

  • Carlos Chaves•260
    @sircarloschavesPosted 12 months ago

    Hi brother!

    If you pay attention, you will notice that the internal border-radius is different from the external border-radius, in different layouts you will also notice this, that if you apply the same border-radius that is in the parent to the child, it will look different even though it's the same number.

    There is a 'hack' to smooth out this difference, which is as follows: You will do a calculation, which in this case will be the external border-radius - the padding or the space between the external border and the internal border.

    If you want to know more, read this article that talks about it: Perfect nested border radius in CSS

    Marked as helpful
    0
  • Carlos Chaves•260
    @sircarloschavesPosted 12 months ago

    Hey, how do I animate a button with a gradient like you did?

    1
  • rzho17•50
    @rzho17Submitted 12 months ago

    I have issues with setting the max-height of an element, specifically my testimonial containers. I tried to set a max height of 250px but it still continued to grow past it. I assumed it may because I have a flex property on them but I am not sure.

    Also I am curious if I am using flexbox too much for each design element. Is this a bad practice? I am just more comfortable using it than grid but will practice other display methods if it is bad practice.

    Thanks for any feedback!

    Responsive Social Proof Section

    1
    Carlos Chaves•260
    @sircarloschavesPosted 12 months ago

    What's up friend, how's it going?

    Let's go:

    • For the testimonial containers you could have used display: grid, you would do grid-template-columns: 1fr in the mobile layout, and when you switched to the desktop you would do grid-template-columns: repeat(3 , 1fr);
    • I think it's interesting that you don't specify a size for the container, but rather let padding-block define the size of your container, but if you found the responsiveness the way you did it best, and it worked, everything is fine. But in general you don't want to specify a fixed size for your designs.
    0
  • Carlos Chaves•260
    @sircarloschavesPosted about 1 year ago

    Hello, when the layout is reduced, the image has a bugged proportion. Screenshot

    You could use an object-fit: cover on the image that would solve the problem.

    Marked as helpful
    0
  • Carlos Chaves•260
    @sircarloschavesPosted about 1 year ago

    Hello, when the layout is on mobile, your card sticks to the edge of the screen. You can easily solve this by adding padding to the body.

    0
  • Eren•720
    @erenymoSubmitted about 1 year ago

    Hello Frontend Mentor Community 👋

    This is yet another project I have finished to practice working with APIs. Mobile layout has little issues but never mind🤭.

    This project pave me the way to learn new things during the coding process. I'm improving my searching skills to fix bugs or problems by building from scratch. My confidence getting increase day by day.

    If you have any recommendation or anything else, please don't be hesitate and comment below. Thank you in advance 🚀😊...

    Responsive IP Address Tracker App with MVC Javascript, Tailwind CSS...

    1
    Carlos Chaves•260
    @sircarloschavesPosted about 1 year ago

    Hello, here in my resolution (1920x1080) the input is pasted in the information below. Here's the screenshot: Screenshot

    1
  • Raha•120
    @rahimi-1997Submitted about 1 year ago

    Hi there, I’m Raha and this is my solution for this challenge. 👋

    Any feedback on how I can improve and reduce unnecessary code is welcome!

    Thank you. :)

    Stats preview card component

    1
    Carlos Chaves•260
    @sircarloschavesPosted about 1 year ago

    I don't know if it's just me, but I feel like the letter-spacing of the words 'templates, queries and companies' in the original design is a little larger, otherwise it's perfect.

    1
  • Raha•120
    @rahimi-1997Submitted about 1 year ago

    Hi there 👋, I’m Raha and this is my solution for this challenge. 🚀

    Any suggestions on how I can improve and reduce unnecessary code are welcome!

    Thank you. 😊✌️

    Order summary component

    2
    Carlos Chaves•260
    @sircarloschavesPosted about 1 year ago

    • The original card has a very soft drop-shadow at the bottom.

    • To me, I get the impression that the padding-inline of the original card's content is larger, and that your card's content is closer to the corners.

    1
  • Julián Aramburu•10
    @julianaramburuSubmitted about 1 year ago

    Questions:

    • How can I improve this code?
    • Is my code semantic enough?
    • Is there a better way to use custom CSS Properties in this case?
      background-color: var(--clr-primary-1);
}

.car__type-2 {
  background-color: var(--clr-primary-2);
}

.car__type-3 {
  background-color: var(--clr-primary-3);
}

    3 Column card component with CSS Grid

    1
    Carlos Chaves•260
    @sircarloschavesPosted about 1 year ago

    In my point of view, you could use utility classes in your project, despite it being a small component with little need for utility classes, but in the example you used above it would be a good choice.

    Think with me:

    • The title of your card, in this case the type of car, is much smaller compared to the original design.

    • Think about the semantics of the card title, in a large project, what do you think the order of the titles would be? From my point of view, the title could easily be an <h2>, because thinking about the structure of a landing page, it makes more sense to have a larger title for the section and then the subtitle. An example would be the section title: <h1>What type of car to choose?</h1> and then your cards with the subtitles <h2>Sedans</h2>, etc. But remembering that it's interesting not to use too many <h1> on your page, if it's a large project that already has a longer title at the beginning, it makes sense to use an <h2> for the title "What type of car to choose?" and use <h3> for car categories.

    • To me it makes more sense for you to declare the font size in the body instead of in the :root element. Doing it this way, you can use em instead of px, because when you set the size of a paragraph 1em, it will inherit from the parent element, which in this case will inherit one by one until it gets the size of 15px of body. An even better way would be to set font-size in the html element, and then you would use rem instead of em when defining font sizes.

    Marked as helpful
    0
  • Carlos Chaves•260
    @sircarloschavesPosted about 1 year ago

    Hey, your background color is different. The background color of the original project is this: hsl(0, 0%, 95%)

    Marked as helpful
    0
  • P. Ricardo•2,370
    @pRicard0Submitted about 1 year ago

    This is my first React project and it was a good project to test the library. I greatly reduced the amount of HTML lines and Tailwind classes because of the components.

    I'm not very used to using ARIA with Tailwind and I don't know if the responsiveness is good.

    Any feedback is very welcome.

    News Homepage with React

    2
    Carlos Chaves•260
    @sircarloschavesPosted about 1 year ago

    Há uma barra de rolagem horizontal, esse comportamento foi proposital? Print

    Marked as helpful
    0
  • Carlos Chaves•260
    @sircarloschavesPosted about 1 year ago

    Hey, your card is not vertically center aligned. On the body, use:

    • min-height: 100vh;
    • align-items: center; And see how it will centralize.
    0