Skip to content
OverviewSolutions
2
Comments
4

Hi, I'm Natalia!

@N-andronic199140 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Hi, I'm Natalia!•40
    @N-andronic1991Posted 4 months ago

    Hello there! Good job on completing the challenge. Some suggestions about your code might interest you:

    1. The image default styles are: img{display:block; max-width:100%; height:auto;}.If you use Css reset style at the beginning that is included.(for reset styles you could use Andy Bell CSS reset if you want);
    2. alt attribute should be used just for content img. In this card we don't have content images. Hope you find this helpful. Happy coding!
    0
  • Hi, I'm Natalia!•40
    @N-andronic1991Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Hello! This was my second mini landing page, and I learned how to create responsive designs without using media queries by utilizing rem units and the CSS clamp() function.

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

    I don’t understand how to make my picture match the example layout. My landing page looks different.

    Block-preview-card

    #semantic-ui
    2
    Hi, I'm Natalia!•40
    @N-andronic1991Posted 5 months ago

    Hello everyone! I made the landing of this block-card-component firstly as fixed (using px units for sizes) and responsive (using media queries), but after reading all comments on how to improve my code I rewrote my code according to feedback (used rem units and CSS clamp()function) I still have my component differ from design, my decorative image looks smaller than at layout design. Can somebody advice how to make it looks the same(you can see the difference on the screenshot above). Thank you

    0
  • P
    schindlerdumagat•250
    @schindlerdumagatSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    What I am most proud of is that I was able to implement responsive design in this challenge. I have used media queries before to implement it but CSS clamp can make it simpler and you can just write it in one line.

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

    I had trouble finding some alternative for media queries on implementing response design but after doing googling, I have found that you can use the CSS clamp function just like this:

    width: clamp(327px, 40vw, 384px);

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

    When you go to the design comparison section of my solution, you can see that I had a little bit of some spacing issues inside of my card container. I tried to follow the design file as close as possible but I can't find a solution for that issue. May I ask what went wrong?

    Responsive Blog Preview Card using HTML and CSS

    1
    Hi, I'm Natalia!•40
    @N-andronic1991Posted 5 months ago

    Hi! You have done a great job! About your problem: I think you should try use line-height:1.5 instead of 150%: Unitless values are often preferred in responsive designs because they scale proportionally to the font size, making them more adaptable. Hope this will help.

    Marked as helpful
    0
  • Hi, I'm Natalia!•40
    @N-andronic1991Posted 5 months ago

    Hello! It looks like your img overflow the content- to fix it you can add to your img styles max-width:100% instead on min-width

    0