CSS code works in CodePen, but not when uploaded to Github Pages?

1

I’m having a problem with my CSS code not working after being uploaded to Github Pages. It works fine in CodePen, but it does nothing in Github Pages. I’ve separated the all the code into two media queries. One which works when the width is above 479px and the other below (for mobile devices). Any help?

@media screen and (min-width: 479px){
  body {
    font-family: "courier new", Courier, monospace;
    text-align: center;
    margin: 8vmin 25vmin 8vmin 25vmin;
  }

  #profile-picture {
    display: block;
    width: 35vmin;
    height: auto;
    max-width: 100%;
    min-width: 10vmin;
    margin: auto;
    border-radius: 7vmin;
  }

  #university {
    font-size: 3vmin;
  }

  #major-minor {
    font-size: 2.2vmin;
  }

  #name {
    font-size: 3.5vmin;
  }

  .descriptions {
    font-size: 2vmin;
    margin-bottom: 5vmin;
  }

  #personal-statement-desc {
    margin-top: 6vmin;
    line-height: 5vmin;
  }

  #header {
    height: 100vh;
  }

  #projects-link {
    text-decoration: none;
    color: black;
  }

  #projects-link:hover {
    color: blue;
  }

  .separator {
    border-style: solid;
    border-radius: 4vmin;
    margin: 4vmin;
  }

  .separator-label {
    font-size: 2.5vmin;
  }

  .title {

  }

  .sub-title {
    font-size: 2vmin;
  }

  #nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 20vmin 8vmin 0vmin 8vmin;
  }

  .links {
    color: black;
    text-decoration: none;
    font-size: 2.5vmin;
    font-weight: bold;
    padding: 0.2vmin 0.5vmin 0.2vmin 0.5vmin;
    border-style: solid;
    border-radius: 4vmin;
  }

  .links:hover {
    color: blue;
  }

  .occupation {
    color: red;
  }
}

/* For mobile devices */

@media screen and (max-width: 479px) {
    body {
    font-family: "courier new", Courier, monospace;
    text-align: center;
    margin: 8vmin 15vmin 5vmin 15vmin;
  }

  #profile-picture {
    display: block;
    width: 50vmin;
    height: auto;
    max-width: 100%;
    margin: auto;
    border-radius: 7vmin;
  }
  
  #name {
    font-size: 5vmin;
  }

  #university {
    font-size: 4vmin;
  }

  #major-minor {
    font-size: 3vmin;
  }

  .descriptions {
    font-size: 3vmin;
    text-align: center;
    margin-bottom: 5vmin;
  }

  #personal-statement-desc {
    margin-top: 6vmin;
    margin-bottom: 6vmin;
    line-height: 7vmin;
  }

  #projects-link {
    text-decoration: none;
    color: blue;
  }

  .separator {
    border-style: solid;
    border-radius: 6vmin;
    margin: 4vmin;
  }

  .separator-label {
    font-size: 3.5vmin;
  }

  .title {
    font-size: 3.2vmin;
  }

  .sub-title {
    font-size: 3.2vmin;
  }

  #nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 20vmin 8vmin 0vmin 8vmin;
  }

  .links {
    color: black;
    text-decoration: none;
    font-size: 3.5vmin;
    font-weight: bold;
    padding: 0.2vmin 1vmin 0.2vmin 1vmin;
    border-style: solid;
    border-radius: 4vmin;
  }

  .occupation {
    color: red;
  }
}
2

Post a link to the repo and live GitHub page.

3

My bad.

seanlhy.github.io

4

It seems to be working for me. What exactly doesn’t work?

Maybe try clearing your cache for the page and refresh it.

5

I tried clearing the cache, but it didn’t do anything. I have a media query that makes the margins and font sizes change when the width of the screen in > 479 px, but nothing happens even if I reduce the screen’s width. Doesn’t work on my phone either.

6

Did you look using the developer tools?

As said it works for me, but I don’t know if you are just not seeing what you expect, or if you literally do not get any CSS loading.

7

Big screen:

image
image1920×1080 337 KB

Small screen:
image
image1920×1080 443 KB

It seems to be working as intended.

8

I’m not familiar with those tools honestly

9

Here’s how it’s supposed to look

Small screen

Screen Shot 2020-05-09 at 10.12.51 PM
Screen Shot 2020-05-09 at 10.12.51 PM2048×839 210 KB

10

Hmmm.

On your GitHub repo, above the code files there is a tab that says “1 environment”. You can click that and see which commit was used to build your webpage.

My GitHub page didn’t build my latest commit and I had to force it manually.

11

It works for me. Are you not seeing the styles for the 479px breakpoint?

479px-breakpoint
479px-breakpoint1904×597 96.8 KB

  1. Add the viewport meta tag to your head element.

  2. You really shouldn’t need the max-width media query. You are using min-width for the desktop styles, so the styles inside the max-width media query can just be the default styles instead (at the top of the CSS before the min-width media query).

12

I added the viewport meta tag and it seems to work now! What exactly did the tag do to make it work? Also if you don’t mind, what program are you using there in the picture? Thank you so much for the help @lasjorg and @nhcarrigan

1 Like
13

The link I gave has information on the tag and what it does.

It’s just the browser, I’d highly suggest learning about the browser developer tools.

Edit: Oh, BTW, the project1-desc paragraph is not closed correctly (you have a closing li tag).

14

Fixed. Thank you I’ll read up on it!