Need to Responsively Resize My Tribute Page

Hello,

I apologize in advance if I don’t format this post correctly, this is my first time posting here. I’ve been working on the Tribute Page project for a little while now and I’m having difficulty getting it to resize depending on the size of the viewport. I’ve quickly come to realize that I made a HUGE mistake by using position: absolute on many of my elements. I also think I created a lot of redundant classes and I’d like to figure out how to make the whole thing more concise. I can only get it to look the way I want it to when I change the view to “full page view,” and even then it only looks alright when I view it on my desktop. It’s a complete mess when I try to view it on my laptop or phone. I’m not sure if I need to use media queries or what. Any help would be greatly appreciated!

My project: My Tribute Page

Welcome to the community!

No worries about the formatting of the post. Generally, when you have a question in relation to a project, you’ll click on “Ask for Help” near where you submit your project, and it’ll auto-format a forum post with a link to the challenge.

With regards to the problem, responsive web design can be tricky, and it may be good to review the entire section to review some principles such as media queries to help you solve this problem. I also found this article to be very helpful in designing in mind for tablets and phones.

I hope this helps you out, and best of luck!

Start narrow and work your way wider. Narrow your browser as skinny as it will go and style the page for that skinny width. There should be no horizontal scroll bar unless absolutely necessary (which is not the case here). After you get the page looking nice in the narrow width then gradually widen your browser and make sure it continues to look nice at wider view ports. To be honest, with content this simple, you probably do not need to use any media break points. As long as you do your CSS styling correctly on the skinny width it should naturally widen appropriately. You can add some max widths to keep the content from getting to wide.

1 Like