Intro

Now for the meat and potatoes of the responsive page. There were really two things that I used to make my page a lot more responsive. That was media breaks and CSS Grid. both in conjunction got my homepage where I wanted it for now.

Media Breaks and CSS Grid

CSS

Homepage CSS

                
                    
      
@media  (max-width: 480px) {
  img{
    width:100%;
    max-width: 20em;
  }
  .grid-box{
    display: grid;
    justify-content: center;
    text-align: center;
    grid-template-columns: 1fr 80% 1fr;
  }
}

@media (min-width: 481px) and (max-width: 768px){
  img{
    width: 100%;
    max-width: 50em;
  }
  .grid-box{
    display: grid;
    justify-content: center;
    text-align: center;
    grid-template-columns: 1fr 80% 1fr;
  }
}

@media (min-width: 769px) {
  img{
    width: 100%;
    max-width: 50em;
  }
  .grid-box{
    display: grid;
    justify-content: center;
    text-align: center;
    grid-template-columns: 1fr 30% 0 5% 30% 1fr;
    align-items: end;
  }
  section{
    margin-bottom: 5em
  }
  #projects{
    align-items: start;
  }
}

Now I broke up the file into three different media breaks. I know there are a few more common media breaks then just three. For my use I really only needed the three. First off I had anything smaller than 481 px. This is used for phones. Anything within this break would be following a stacked method that we will talk about in the next section. Next week had anything between 481 and 760. This is used for tables and small monitors. This is also going to be a more stacked layout. Finally the desktop. This layout is going to be used for desktop and will have a layout with elements next to each other.

When I was building this website A homepage There were two layouts that I wanted. A stacked one that would have all the elements on top of eachother. The other layout would be anything in the same section would be next to each other. So every section has sic divs in it. These are all the grid items. When working with cell phones and tables I wanted the stacked option. With this in mind I made the CSS grid have three columns and two rows. This allowed me to make the middle column take up the most space while using the outside columns to give the content padding from the walls of the window.

When I was on the desktop I wanted everything in one row. I accomplished this by only giving the grid six columns and only one row. Then any column I didn't need I gave it zero width. This is how I accomplished the look I wanted.