Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card main

Rafig 70

@refikmemmedov

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I didn't do much this time. I am still aiming to improve myself and trying to consolidate HTML and CSS.

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

I found it difficult to translate it to the mobile side. I have difficulty making responsive design

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

I'm currently asking for help from someone on the responsive design.

Community feedback

Yash Bhatt 280

@Y-ashbhatt

Posted

Nice Solution!

As for responsiveness, websites are inherently responsive and most of the time it's our CSS that breaks them lol.

As for your code the problem is the width in main class.

Avoid setting fixed width values for elements like this. You've set width: 100vw. 100VW would represent 100% of the viewport's width, or the full width of the screen. % reflects a percentage of the parent element's size, regardless of the viewport's size. Instead, you can set a max-width to it or give it no width.

Go through the LEARNING PATHS. I'm learning responsive design through them, they're pretty good.

Hope it helps you.

Marked as helpful

2

Rafig 70

@refikmemmedov

Posted

thank you very much for the comment @Y-ashbhatt

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord