Tribute Page Feedback - John Mayer Tribute Page

Hi guys I recently finished my tribute page, I’m happy with it but feel start to get a little confused in regards to making the page completely responsive, I know I could be moving on, but it bothers me to have these issues. Also if there is anything else with the HTML or CSS that you think i should be implementing, looking at or revising, then please let me know. Again, I am happy with the layout and the final look of the page, but obviously I may be biased.

Thanks a lot.

Hi there :slight_smile:

The page on the monitor looks fairly decent. There are a few issues when looking at it on a smaller screen however. Primarily, the album sections:

I’d suggest making it so that at smaller sized screens the album and the title are all on top of each other instead of being side by side as this does feel a little cramped. It would be as simple as just setting the flex-direction property from row to column and maybe centering the content in the middle if you so choose.

Speaking of album sections, you don’t need to have so many different ones. Instead of having album-1, album-2, album-3 and album-4, replace them all with a single album-container as all the properties are just repeated unnecessarily. It’s not important, but it is good practice and makes your code much easier to read and change.

Another good practice would be setting a margin for the main tag. Right now you have one margin for the left and one for the right, which is great if you ever decide you want your page to be off-center for one reason or another. But if you always want to keep it centered, it’s better to type margin: 0 auto; and then set width: 70%;. That way if you ever want to make it wider or thinner, you only have to change one property and not have to do math to figure out how to keep both sides even.

And that’s about all I got. The rest of it looks pretty good and there aren’t any glaring issues that I can see right now. Maybe someone else can pitch in. Keep it up :slight_smile:

That’s some great advice I will try to have a go at this in the week and post another codepen with the updates, thanks very much for your time!

Okay so after some time I managed to update the page to be more responsive when making the page on the monitor smaller, however when using atom and google chrome I struggled to make the page responsive to screens such as the galaxy s5, it seemed that all of my changes to the page woud be null and void as soon as I used the device toolbar.

On the note of the album containers, I couldn’t seem to work out how to change from many containers to just one as I have been using the containers individually as flex containers for the content inside of them, any ideas on that owuld help greatly.

here is the updated code pen.