Struggling to make my Tribute Page responsive

HTML-CSS
1

Tell us what’s happening:
Hello! First time poster here, would appreciate some guidance.
So the problem is there was a point in my CSS code where I could resize my window and the contents would adjust accordingly. But, I changed some parts, and now when I shrink it in width to its smallest size, the contents get cut off a bit and the contents remain the same size. How do I fix this? Here’s my codepen: https://codepen.io/ch4rmelle/pen/xxOxwNY
Thank you in advance!
Your code so far

body {
  margin: auto 0;
  background-color: #dedede;
  font-family: 'Libre Baskerville', sans-serif;
}

p {
  font-size: 0.8em;
}
#main {
  background-color: #fafafa;
  border-color: gray;
  padding-left: 20%;
  padding-right: 20%;
  
}
//makes image responsive
img {
  max-width: 100%;
  height: auto;
}


h1 {
  font-size: 3em;
}

h2 {
  text-align: center;
  font-size: 2em;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#tribute-info {
  text-align: justify;
  max-width: 500px;
  line-height: 25px;
}

#ultra-pic {
  max-width: 300px;
}

#channel-pic {
  max-width: 300px;
}

#blonde-pic {
  max-width: 300px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

2

@cjgon123 You need to add a media element in your CSS and set the text to fit the page properly that way. Making pages responsive can be tricky, especially for those who aren’t familiar with doing so.

1 Like
3

Hi @cjgon123, rather than hardcoding widths with pixel values it’s easier to make the page responsive by using percentages. You won’t need media queries.

1 Like
4

thank you for the advice, gonna try that!