Tribute page tribute-info

1

I finished first project and everything seems good enough except for #tribute-info content, I set width 30% and margin to auto and it looks fine when it’s full screen, but when I resize it as small as I can, that width really becomes an issue.
How do I make it as responsive as it is in the example?
TIA

2

Hello,

I think setting a percentage as the width is not ideal, as it changes the look of the page so much depending on the screen. I did a little tinkering and set the width to a fixed value. Then I create a break point with a media query and used a percentage width for small screens.

You can look up media queries and try getting that to work. If you want to know how I fixed it, here’s my code:

#tribute-info{
  width:580px; /*CHANGED THIS*/
  margin: auto;
}

@media only screen and (max-width: 600px) {
  #tribute-info {
    width:90%;
  }
}

(I am still working on the same course, so I am not an expert on this. Someone might well have a better solution for you.)