Hello,
I have completed the Tribute page, however, it’s not looking good on Mobile platforms. Also, I took care of responsiveness in my code, but not looking as good as the tribute page from FCC.
Any help is highly appreciated.
You need to add a media query to your CSS to remove the large margins you have added in when viewing on a mobile device. I would also move your "div class=“container-fluid main-box” inside of the body tag. Here is the media query that I quickly wrote as an example:
@media only screen and (max-width: 768px) {
.main-box {
margin: 0;
}
.content-main{
margin-left: 0;
margin-right: 0;
padding: 10px;
}
h3, h4 {
margin-right: 0;
margin-left: 0;
}
}
Indeed, place your container-fluid inside of your body tag.
Also, I suggest not using a set width size for your main-box div, but to use a percentage…that way it will scale up and down and take up a % of whatever the screen size is. Actually, all throughout, you are using margin-width as a way to present your layout, which is causing everything to throw off on smaller screen sizes.
Think of it this way…the standard max size of a phone is 480px.
Right now, your main-box has a margin on both sides of 100px for 200px total.
And your content main has left and right margin set to 150 for a total of 300px.
That is 500px of just margin space…on a screen thats only 480px wide.
I hope that kind of clarifies why things are going wonky on mobile. So yeah, use percentages, and also you are using margin widths to center your headers…instead use the text-center class in your header tags to center them…Hope that helps!
Thanks a lot @cndragn and @shreecheryl for the detailed analysis and explanation. I will make the necessary changes and see if everything goes well 
1 Like
Hey @cndragn, that %age thing actually did wonders. This will certainly help me in future https://codepen.io/rajat1210/pen/LLgbdB Here’s how it looks now, thanks a lot
1 Like
YaY! It scales beautifully now!!! Glad I could help!!! 