Fixed UI of blog page

[TamannaVerma99]

What kind of change does this PR introduce?
A bugfix

Issue Number:
Resolves #412 & #427

Summary
I've made appropriate improvements to the CSS properties of the blog landing page to ensure responsiveness across all screen sizes. Additionally, I've enhanced the picture size on the landing page for better visual appeal and readability. These changes aim to create a more user-friendly and visually engaging experience for visitors accessing the blog. Also, fixed the image size to eliminate issues caused by too much padding.

[officeneerajsaini]

Mention #412 in your pr it will add on that issue pr , so maintainer can review or understand easily .., it can make easy to access

[DhairyaMajmudar]

That's an amazing pr @TamannaVerma99 but can you pls. remove unwanted changes done by prettier extension so that it will be easy for maintainers to review the actual changes.

Also pls. add pr title suggesting the changes done.

Thank You : )

[aialok]

That's an amazing pr @TamannaVerma99 but can you pls. remove unwanted changes done by prettier extension so that it will be easy for maintainers to review the actual changes.

Also pls. add pr title suggesting the changes done.

Thank You : )

@TamannaVerma99 , If you remove prettier changes then it will throw eslint error. Make sure you have fetch the latest changes before working on issue.
Once you fetch the latest changes you will not get any additional changes.

Thank You : )

[TamannaVerma99]

Thank you so much for your suggestions, Really appreciate them!
However, I believe using Prettier for such Code Bases definitely counts in as one of the good coding practices. Infact, we should have Prettier & EsLint configured already in the code base to encourage them :)

[aialok]

Thank you so much for your suggestions, Really appreciate them! However, I believe using Prettier for such Code Bases definitely counts in as one of the good coding practices. Infact, we should have Prettier & EsLint configured already in the code base to encourage them :)

Basically we do already setup the prettier and eslint. Just fetch the latest changes : )

[benjagm]

Mobile looks great. For desktop there is a great improvement but I think we'll need to move the element down in the vertical axis to have them centered vertical. See image.

We need the same height in the arrow on top and in the arrow in the bottom.

[TamannaVerma99]

okay ,I will do the required! Thanks for the feedback :)

[TamannaVerma99]

Made the required changes @benjagm . The text is now aligned at the center for desktop view. However, it is quite improbable to do the same on all screen sizes, given the inclined nature of the image. But have tried my best to ensure appropriate text alignment accordingly on all remaining screen sizes.

[TamannaVerma99]

@benjagm can you please have a look on it?

[benjagm]

Is this screens declaration necessary?

[benjagm]

Looks great. Just left a comment regarding editing tailwind.config.js. I am not sure if the new code there is necessary.

[TamannaVerma99]

@benjagm in order to add custom screen sizes in Tailwind, its necessary to specify the default screen sizes as well to prevent overwriting them. So, needed to add them as well along with the new custom size (ab1 :'890px')

[aialok]

Hey @TamannaVerma99, it seems like you haven't formatted the code with Prettier. Now, when I fetch the latest changes, I'm getting ESLint errors for the file you've edited. Did you bypass the Husky pre-commit checks?

I think you should format and check for ESLint errors before pushing your code. Otherwise, it could create problems for other contributors who are working on the project.

Well, we've recently implemented a PR workflow where we check formatting, ESLint, and type checking. This should prevent this type of issues in the future.

@benjagm, this needs to be fixed as soon as possible. You can either revert this PR or fix the issue from your end.

Thank you : )

[benjagm]

Fixed in production. Thanks everyone.