Feedback for my Legend of Zelda tribute page

Code Feedback
1

Hi campers!
I just finished my tribute page to the Legend of Zelda series: https://codepen.io/naiza/full/qNJKON

I think I may need to read more on graphic design :grin:

Edit: I just viewed it on my phone and the images are super tiny :disappointed:
I’ll try to fix it today.

1 Like
2

Very nice! I think the biggest improvement you could make would be to keep the photos of each game with the relevant text. This is easy to do with Bootstrap, just stick them both in a <div> with a class of row, then use the col- classes for the text and images.

    <div class="row">
        <div class="col-xs-3 image">
            <p class="well"><a href="https://en.wikipedia.org/wiki/The_Legend_of_Zelda_(video_game)"><img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/en/3/3a/Legend_of_Zelda_NES.PNG"
            alt="Link attacking Octorok monsters with his sword in the overworld"></a></p>
        </div>  <!-- closes image -->
        <div class="col-xs-9 text">
            <p class="well"><a href="https://en.wikipedia.org/wiki/The_Legend_of_Zelda_(video_game)">
                <span class="game-title">The Legend of Zelda</span></a>, the first game of the series, was first
                released in Japan on February 21, 1986, on the Famicom Disk System (NES). A cartridge version,
            using battery-backed memory, was released in the United States on August 22, 1987, and Europe on November 27, 1987.</p>
        </div>  <!-- closes text -->
    </div>

Notice that instead of all the images being in a row class and all of the text being in another row class, each text/image combination would be in a separate row. Hopefully, I made that clear and didn’t just confuse the hell out of you :thumbsup:

3

Yeah and the images don’t really show on small screens. Maybe you could try to put them at the head of the description when the screen is small. :wink:

4

It is lovely. On my iPhone it “floats” on the screen. Not sure what causes that. Maybe someone else will know.

5

I just started coding but I think I can help you with this one!

Excuse me if my english isn’t the best, I’m actually from Germany :sweat_smile: Nevertheless I hope you get what I want to tell you.

To prevent your images to get too small you could set your .well Class to “min-width: 100px” (in your CSS):

.well { background-color: darkseagreen; min-width: 100px; }

Now, when you resize your screen/browser, it will size down until it hits 100px of width and then stops getting smaller.

If you now do what @PortableStick wrote your Site will look much better :slight_smile:

The Problem now is, if you smaller your screen to a certain point or watch the site on a phone, your columns will overlap because the wells don’t get smaller anymore.

To solve that you can set your column classes like this:

<div class="col-xs-12 col-md-3">
for the Images
and 
<div class="col-xs-12 col-md-9">
for the Text-Section

This will, if you watch the site on an extra small (xs) screen like a phone, set the columns-width of your images AND text to span 12 columns; it will place the Text-Section under the Image.
Then, if you resize or watch the site on a medium (md) screen - for example a desktop, you will have your Design of 3-column width for the Image and 9-column width for the text.

https://getbootstrap.com/examples/grid/

I also tested it as an exercise:

See the Pen Tribute Page to The Hero of Time (FreeCodeCamp project) by Chris (@SehrOne) on CodePen.

6

Thank you all for the feedback. I’ll be doing the improvements to this project today :grin:

7

Thank you! I was actually wondering how to align the images with the text. I don’t know why I thought a giant row was a good idea :laughing:

8

I’ve added all the feedback. Now the page really feels responsive!