Can anyone tell me what is wrong with my website?

Can anyone tell me what’s wrong with my github pages subdomain???
I created this website totally from scratch, and it was working fine locally. But when I uploaded it to Github servers, the “follow me on github” button is not working as expected. Why???
It is working locally, but not online… Why???
Is this a problem with my code??? If yes, then please highlight the code snippet that seems wrong. Please.
I am a newbie to github.
My Github username: dhruvkrishnavaid
My Github Pages subdomain: dhruvkrishnavaid.github.io
My Repository: https://github.com/dhruvkrishnavaid/dhruvkrishnavaid.github.io/

Hello @dhruvkrishnavaid, welcome to the GitHub Support Community!

Just to clarify: what is the expected behavior of the “Follow me on GitHub” button? When checking your website, the button appears to be normal and it also leads to your profile on GitHub when clicked.

@sethclydesdale Yes, It’s working fine but with a small glitch.
The expected behaviour, about which I mentioned, was that the link should be spread all over the button. In Google Chrome, it was just upto it’s upper edge.
It maybe a browser or viewport issue. Because when I opened it on Microsoft Edge, it was working fine. Earlier I used Google Chrome. :astonished::astonished:

Note the location at which the colour of the button changed in both the cases.

Issue with google Chrome: https://gofile.io/d/4MQgvz
Resolved in Microsoft Edge: https://gofile.io/d/rxNnlJ

1 Like

Ah, you’re correct! Thanks for clarifying. :+1:

It is indeed an issue with viewports. Adjusting my browser window or opening the devtools docked to the bottom displaces the .home-feature section, causing it to overlap the button and block it from being clicked.

The negative top margin on the .home-feature class appears to be causing the overlap.

.home-feature {
  padding-bottom: 0px;
  padding-top: 30px;
  margin-top: -220px;
  z-index: 9;
}

So getting rid of that would fix it. However, if it’s a necessary part of your design, you may need to adjust the margin-top value with a media query, like the one below.

@media (min-width:991px) and (max-height:680px) {
  .home-feature { margin-top:-150px; }
}

Using the device mode in Chrome, I could deduce that it happens when the viewport’s height is around 680px.

1 Like

Thanks for your help… :kissing_heart::kissing_heart::kissing_heart:
The media query worked. It was indeed a viewport conflict.
Thank you sooo much. :heart::heart::heart:

1 Like

You’re welcome! Glad to hear that fixed the problem. :slight_smile:

Have a good day.