Seeking Feedback for my Tribute Page! (My first stab at responsive design)

Dear Fellow Campers,

I just finished my Tribute page, and I was hoping to get some feedback.

https://codepen.io/kiwisquash/full/pBRqqw

I tried to incorporate as much of what I learned from the Responsive Web Design Curriculum as possible. It looks okay to me, but I am sure there is a lot of room for improvement. In particular, I am wondering if my use of CSS grid makes sense, and whether I should have used flex box or floats.

Thank you for your time. Have a great weekend!

it’s just beginning you get to know many idea about and the end of the day keeps coding , you did your level best , well done man
Happy coding

1 Like

the tribute page its self is great and good choice btw the tech-lead is awesome :grinning: because he is the tech-lead, but the problem is the container is not filling the full screen see pic:

my guess is it has something to do with the minmax on the grid container as its set with px i dont really know what minmax does as i use flexbox not grid so iv never really used it but try using % see if that works and also you should remove the height:800px

Thanks for the replies!

The reason why I put the 800px height was because I wanted to be able to scroll down the tribute page while keeping the nav page where it was, without removing the nav menu from normal flow.

I’ll try to make this work in another way. Thanks for pointing this out.

1 Like

normaly i would use position:fixed but that seems to mess up your page, so try giving the container a height of 100vh instead of 800px and also remove the overflow:scroll from the nav, and try overflow-y: scroll; on the #tribute-info instead of just overflow:scroll

Ah figured out the trick.

So putting my nav to position: fixed messed up the page, because the page is expecting two columns, but I am only providing one (because nav is getting removed from the normal flow).

I can get the page to work the way I originally wanted to by putting an empty div container as a placeholder. I need to make some modifications to my media query. I’ll make the changes and update it on codepend.

Thanks for your help, @biscuitmanz!

1 Like

thanks man looks good now mate one thing i will say about the media queries is you seem to have multiple ones with the same max-width, it would be better if you just have the one right at the bottom of the page with all your tags and stuff in it will be easier to manage :slightly_smiling_face: also you dont need an overflow:scroll in your nav as it doesnt need to scroll and use 100vh instead of 100% on the height to get rid of the gap on the bottom, job job mate happy coding

Thanks for the tip on moving the media queries to the bottom. I didn’t realize that the variable declarations can be moved below their usage.

I want to keep the overflow:scroll on the nav for the rare situation on the browser where the window is sized too short.

I tried using 100vh on the tribute-page container, and it is giving me some problems. I’m also not seeing a gap with the current settings…

This is what I see with the 100vh:

I believe this is happening because the height of the viewing window is smaller than the total length of the content. (This is not an issue when zoomed in.)

I also don’t see a gap at the bottom of the page when I use 100%… I wonder if this is caused by differences in our browser.

yeah you should always have the media queries below their usage, and i meant 100vh instead of 100% on the nav not the container you dont need any height on the container you can leave that blank :slightly_smiling_face: i just checked the page and it is looking good now anyway :smiley: im glad that the media queries at the bottom helped but what i also meant was instead of this:

@media only screen and (max-width: 400px) {
	h2 {
		text-align: center;
	}
}	

@media only screen and (max-width: 400px) {
	footer {
		font-size: 4vw;
	}
}	

@media only screen and (max-width: 400px) {
	:root {
		--header-font-size: 10vw;
		--subheader-font-size: 7vw;
		--quote-font-size: 5.5vw; 
		--tribute-padding: 7vw;
		--quote-padding: 0vw;
	}
}

you can do this:

@media only screen and (max-width: 400px) {
       :root {
		--header-font-size: 10vw;
		--subheader-font-size: 7vw;
		--quote-font-size: 5.5vw; 
		--tribute-padding: 7vw;
		--quote-padding: 0vw;
	}
        h2 {
		text-align: center;
	}
       footer {
		font-size: 4vw;
	}
}	


to save you having all their media queries all over the place, makes it easier to manage :smirk:
anyway have fun coding i look forward to seeing your future projects.

Yeah, made the changes in my local repository, but didn’t make the changes in the codepen.

Btw, setting 100vh doesn’t seem to be eliminating the gap on codepen. I don’t see this gap when I open the files from my computer, and the gap does not appear regardless of whether I am using vh or %. I am assuming it has something to do with the way codepen renders the pages. (Btw, I realized I just had to use the right overflow setting to use 100vh on the tribute container to avoid the screenshot.)

Thanks for looking through my code until the end!

glad to help mate and i cant see a gap when i look at your codepen, anyway i wouldnt worry to much if its all working with the files. working on your desktop will always be better iv never been much of a fan of codepen tbh, i wish you best of luck with your future coding :slightly_smiling_face: