All solutions

Hi folks,

This was a fun yet challenging task. A few places where I went wrong:

1. Not including the community section in the main or footer container.

Areas where I need help:

1. Overlapping of community section.

I tried using transform: translateY(), but this section was instead getting hidden behind the footer. The z-index property was not helpful either.

1. Adding a round border(circle) to the Social media icons:

Fixed the width and height of the icons. But, circles around the icons appeared as an ellipse. When padding was added, alignment was not proper, meaning the icons were not at the center.

1. Also, the copyright section is flushed all the way to the bottom of the screen. Is it because of a lack of viewport height?

Open to other feedback!

Thanks for viewing my work.

Hi folks,

Currently, the website is optimized only for desktop and tablet versions. The Mobile version seems to be complicated. I have a few questions tho.

1. The header, central part, and footer are not wrapped in a single container. Instead, I have made them as individual items. Is it good practice?

2. What is the correct way to add a circle border to the social media icons?

Open to other feedback as well.

Thanks for reviewing my work!

Hi folks,

My solution might not be optimized/the correct method. I used the grid to place the header, main, and footer. Using the grid-column/row property I aligned the child items and used flex too. Please review my code and let me how it can be improved better.

1 When the screen shrinks below 400px, the right side of the screen remains fixed but not the left side. I used max-width of 400px for the container. What might be the issue?

Thanks for reviewing my work.

Hello,

1. When the screen shrinks to 820px, icons in the card got displaced. How do I avoid it?

Hey Coders,

Few things I noticed during this challenge.

1. There is no smooth transaction between the desktop version and mobile version.
2. When I shrink the screen the container doesn't shrink until it reaches the breakpoint for the mobile version. What might be the issue?

As always happy coding!

Hey coders,

1. How to align the testimonial cards as per the design? (I tried the margin-top option but it will only shrink my card)
2. While testing the responsiveness of the page I noticed that around 400px the rating sections do not wrap while other contents shrink. What might be the reason?

Thanks for reviewing my work.

Tired media query to stack the content in a single column for the mobile version. But, I wasn't really able to do that.

1. Is there a better way to solve the problem?
2. Is my HTML in good order?

Thanks for reviewing my work.

1. Is it necessary to set the background size for the image in the body?
2. Contents in the plan details were not aligned as per the design. Would like to know the solution for the same.
3. Width of the pan details and payment button is not equal. How do I match the width of both elements?

Thanks for taking the time to review my work.

1. How to avoid vertical scrollbar?

Feedback welcome.