Nulbarich Tribute Page, need feedback

Code Feedback
1

Hello Everyone.

I’ve just finished my Tribute Page project went a little bit extra on it.


been trying to figure out how to use the template grid that automatically set with the width of class=“container”.

The problem I’m having is when the page is loaded using a tablet or phone (mobile use), the grid slip out of the container. I had a feeling the problem is on my container style itself since it is not loaded properly but I can’t figure how to fix it. Much appreciate any feedback and suggestions.

Thank you and happy coding…

Edit: I figure it out. I deleted the template grid which apparently I don’t really need, and that’s where the problem at.

2

Hey this is really great! Though I think the image title is almost unreadable and just too close to the image.
The Albums & EP sections aren’t mobile optimized. You should use something like grid to fix it and make it responsive.

Anyway this is great, keep coding!

1 Like
3

thankyou for the feedback^^ .
yeah, that’s the problem i’m having. I already used template grid on it, but I can’t figure it out. I had a feeling the error is in the container section. but I don’t know how to fix it.

4

Welcome to the forums @ayuarista. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
    • The test script is JavaScript. It wouldn’t go in the head element because it wouldn’t work. It should be just before the closing body tag.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Try using percentages when coding widths rather than hard-coding pixel values.
  • Review the lesson about giving meaningful text to links.
2 Likes
5

great I like the music you put on, I did not know about this type, to make it responsive I start with devices of lower resolution and when increasing I make the adjustments. For drawers or sections that I use as containers I control them with display grid, and for internal ones with display flex.

1 Like
6

You can do:

.your-album-container {
    display: grid;
    grid-template-column: repeat(auto-fit, minmax(100px, 1fr));
}

The auto-fit and minmax will take care of the resizing for you.

1 Like
7

@Roma thankyou very much for the feedback^^
I’ll look into it, and make correction :smile:

@GabrilRIP on this page I work from bigger resolution to lower, so when it’s doesn’t line up the way I wanted its started to get confusing on where to fix it. I’ll keep what you said in mind and try it out^^

@ShAfi aaah, okay. thankyou^^ I’ll try that next time. I might make another page just to practice more on grid template :sweat_smile: