search

shelbourn / FreeCodeCamp_Challenges

Just a repository with some of the projects I've completed using FreeCodeCamp.com
0 stars 0 forks source link

Change vh or vw for Cover setting in Portfolio 2 #6

Closed shelbourn closed 8 years ago

shelbourn commented 8 years ago

Change the vw or vh setting in the Portfolio 2 CSS to make the cover page appear full width and full height

shelbourn commented 8 years ago

This code snippet fixed this issue, however it created a new issue with the container formatting within the cover page:

BEFORE --

.wide {
    height: 100vh;
  height:calc(100% - 1px);
    background:
        linear-gradient(
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.25)
        ),  url('https://raw.githubusercontent.com/shelbourn/FreeCodeCamp_Challenges/master/Matt_Shelbourn_Portfolio_Cover.jpg');
  background-size: cover;
    background-position: center;
}

AFTER --

.wide {
    height: 100vh;
  /* height:calc(100% - 1px); REMOVED TO MAKE COVER FULL VIEWPORT HEIGHT. LOST THE BOTTOM CONTAINER THOUGH. NEED TO FIX */
    background:
        linear-gradient(
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.25)
        ),  url('https://raw.githubusercontent.com/shelbourn/FreeCodeCamp_Challenges/master/Matt_Shelbourn_Portfolio_Cover.jpg');
  background-size: cover;
    background-position: center;
}