Rodrigo Pereira da Silva

Latest comments

• 

  P

  Nathan Molina•230

  @NatentadoSubmitted 27 days ago

  

  Responsive Landing Page.

  1

  00
  

  P

  Rodrigo Pereira da Silva•210

  @rodrigopereira21Posted 26 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
• 

  12mohamedh•100

  @12mohamedhSubmitted 4 months ago

  

  Testimonials grid section solution.

  1

  30
  

  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
• 

  Joseph Stalin•240

  @Soliman0100Submitted about 1 month ago

  

  ...

  1

  10
  

  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

  Edina Karsai Sztanojev•260

  @sztedinaSubmitted about 2 months ago

  

  Responsive landing page

  1

  20
  

  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
• 

  Usman Shabir Kousar•130

  @usman-97Submitted 3 months ago

  

  Recipe Page | HTML & CSS

  1

  30
  

  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
• 

  RN6401•40

  @RN6401Submitted 2 months ago

  

  Social Links Profile

  1

  20
  

  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