Some broken CSS

[utkarsh2102]

Hi @FabioRosado,

Thanks for your work on this!
However, this has some CSS that needs fixing. For instance, see the highlighted part in red:

I am temporarily using the following patch as a work around for this:

--- a/assets/style.css
+++ b/assets/style.css
@@ -342,11 +342,13 @@ body {
 .sidebar .avatar {
   padding: 2.5rem 3rem;
   background: #8067B6;
+  text-align: center;
 }
 
 .sidebar .social {
   background: #33DABD;
   padding: 1.5rem 3rem 1rem;
+  text-align: center;
 }
 
 .sidebar .social .fab:hover, .sidebar .social .far:hover, .sidebar .social .fas:hover {
@@ -356,7 +358,7 @@ body {
 }
 
 .sidebar .menu {
-  padding: 2rem 3rem;
+  padding: 2rem 4rem;
   background-color: #455160;
 }
 
@@ -374,7 +376,8 @@ body {
 
 .right-sidebar {
   grid-area: sidebar2;
-  margin-top: 2rem;
+  margin-top: -1rem;
+  padding: 3rem;
 }
 
 @media (min-width: 924px) {

With the above patch, it looks something like this:

I can raise a pull request if you want!?

[FabioRosado]

Hello @utkarsh2102 thank you for raising this PR, It's been a while since I worked on this project and this was well spotted.

I believe the issue that you are seeing is from a wider screen that I was using at the time, so perhaps these changes could be done on a media query whenever the screen is > 1265 wide?

Would be happy if you raise a PR to fix the issue if you have the time, thank you so much! 😄 👍

[utkarsh2102]

Hi Fabio,

I believe the issue that you are seeing is from a wider screen that I was using at the time, so perhaps these changes could be done on a media query whenever the screen is > 1265 wide?

I am using Thinkpad X280 which has 31.75cms (12.5) display.
I don't think it's a wide screen :P
It's particularly small 😄

I think I can reproduce this issue in all kinds of screen size, monitor, or laptop. So perhaps it should be generic?

Would be happy if you raise a PR to fix the issue if you have the time, thank you so much! 😄 👍

Sure thing! Shall do later today \o/