Fork Me! FCC: Tribute Page. Need Help! I cannot adjust the page to fit smaller screens

HTML-CSS
1
2

Nice effort, I’ve just looked at it on my phone and it’s not responsive I. E. Doesn’t look good on my phone, add some media queries to make it responsive???

1 Like
3

Thank You for your valuable suggestion. I will surely work on this and update it. :slight_smile:

4

Hi,
That looks really good, but yeah, it doesn’t adjust down well.

This below is not going to work well for you. Look at what it does to the menu for the test suites. It also creates problems when your screen shrinks.

*{
	min-width: 480px;
}

I see that you’ve used a lot of fixed sizes to position things on your page. This is why it does not shrink down nicely to the small screen. Your image div and the content div have very large fixed padding.

Below is how I would deal with this. You might try something similar

It might be easier if you put your image and content both in one containing div <div class='container'> and then only deal with that large left and right margin on one element instead trying to adjust each div to the page. Any minor tweaks would be made against that containing div, not the body

body{
  text-align:center; /*centers everything without padding*/
  margin:0;
  padding:0;
}

.container{  
  max-width:700px;  /* pick a width that looks good to you */
  margin:auto; /* collapsing margin - no fixed sizes */
  outline:solid red 1px;  /* just for testing */
}

#image{
  width:100%; 
}

#img-div{
  box-sizing:border-box;  /* google this */
  border:10px solid white;

what this does for your page…
margin-auto takes care of large side margins for all the content and it shrinks with the smaller screen (in this case shrinks until page is 700px or less wide). Avoids that fixed size padding.

Using max-width on that containing element allows it to shrink with screen below 700px. You could possibly get by without a media query but probably one to tweak text for small screen would be helpful. Solves some of your small screen issues

Red outline is just so I can actually see the container while designing.

Most everything else I would keep exactly as you have it.

Good luck on this.

5

Thank You very much. I updated it using Media Query. Took some time but worth it.
Here, have a look at it and tell me what you think: