Skip to content
OverviewSolutions
8
Comments
8
Rodrigo Pereira da Silva
@rodrigopereira21

All comments

  • P
    Rodrigo Pereira da Silva•210
    @rodrigopereira21Posted 27 days ago

    When opening the preview site it seems that there was a problem with the css. However, from the screenshot it looks very good, congratulations!

    0
  • P
    Rodrigo Pereira da Silva•210
    @rodrigopereira21Posted about 1 month ago

    Well done! You've made good use of semantic HTML, and the code is well structured and responsive. One suggestion is to move the CSS to a separate file, which will make the HTML cleaner and more organized. Also, instead of using px, consider using rem to define the units of measurement. This will provide even better responsiveness, adjusting the layout more efficiently according to the size of the screen!

    Marked as helpful
    0
  • P
    Rodrigo Pereira da Silva•210
    @rodrigopereira21Posted about 1 month ago

    The card proportions are generally good. Add 2rem (32px) of padding to the cards for better spacing. Also, slightly reduce the card height.

    The layout breaks on medium screens when resizing. This issue doesn't occur on smaller screens. A media query should resolve this.

    The <h1> font size in the header appears too large, causing text to wrap unexpectedly on smaller screens. Reduce the <h1> font size within a media query for smaller screen sizes.

    The <br> tag within the header's <p> tag is disrupting the layout on smaller screens. Remove the <br> tag. Instead, control the header paragraph's width using width on the container element to manage text wrapping. This will provide a more consistent and predictable layout.

    Prioritize the use of rem units over px for sizing elements, padding, margins, and font sizes. rem units are relative to the root font size, allowing users to control the base font size in their browser settings. This makes your website more accessible to users with visual impairments or those who prefer larger text. Using px can create inflexible layouts that don't adapt well to different font size settings.

    0
  • P
    Rodrigo Pereira da Silva•210
    @rodrigopereira21Posted about 2 months ago

    Good. just try using this on the body to center the card both vertically and horizontally:

    .wrapper {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
    Marked as helpful
    0
  • P
    Rodrigo Pereira da Silva•210
    @rodrigopereira21Posted about 2 months ago

    To maintain the original proportions of an image while ensuring it fits within its container, use the following CSS:

    css

    img {
    display: block;
    max-width: 100%;
}

    This ensures the image scales responsively without distortion. Additionally, consider slightly increasing the width of the container to allow for better presentation of the image, especially on larger screens.

    Marked as helpful
    1
  • P
    Rodrigo Pereira da Silva•210
    @rodrigopereira21Posted 2 months ago

    try to use this to centralize the card vertically and horizontally:

    display: grid;
place-items: center;
min-height: 100vh;
    Marked as helpful
    0
  • Perfect-Patience•20
    @Perfect-PatienceSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud that I paid extra attention to the Figma file and managed to get the card to look as close to the design as possible. I noticed details like the vertical gap and drop shadow measurements in the Figma file.

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

    The main challenge in this challenge for me was finding a way to adjust the widths of components based on the screen size without using the @media query. I researched and learnt of the clamp property in CSS which is what I used to obtain this effect.

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

    I want feedback on whether I used variables properly in this project. And on anything I could improve.

    Responsive Blog preview card, using CSS Clamp and Grid

    3
    P
    Rodrigo Pereira da Silva•210
    @rodrigopereira21Posted 2 months ago

    Very good. the only thing missing was a bit more line height in the text.

    Marked as helpful
    1
  • P
    Rodrigo Pereira da Silva•210
    @rodrigopereira21Posted 3 months ago

    To vertically center a card within its container, use the following CSS properties in the container's style:

    display: flex;
align-items: center;
height: 100vh;

    This combination achieves the desired centering:

    display: flex; enables flexbox layout within the container, giving you control over item alignment. align-items: center; specifically aligns flex items along the cross axis (vertically in this case) to the center of the container. height: 100vh; sets the container's height to 100% of the viewport height, ensuring it occupies the full vertical space available.

    Marked as helpful
    0