Redone my Tribute page

Redone my Tribute page
0.0 0

#1

https://codepen.io/HannahLM/pen/XqvwYb

I’ve redone my tribute page to optimise the responsiveness on different screen sizes! Any feedback would be appreciated. Thank you :grin:

Edit: The link above should be the most up to date version


#2

Looks good, good work. But had some small issues.

Add <meta name="viewport" content="width=device-width, initial-scale=1.0"> in head (read more here)

First apply size or word-break policy for the title. For small width, the title text causes the horizontal scrolling which breaks responsible for small screens. ( word-break: break-all )

Also never load big images to show them in smaller sizes. This is acceptable for your test.

This is also better to use relative unites over absolute units. for example use 3em rathe 30px. For high DPI screens 30px is kind of nothing.

More line height could be better for easier reading. ( line-height:150% )

For quoted section, you may use italic font-face, also a light background color, and sometimes left border. But this is just styling.

Keep going on good work.


#3

Using background-attachment: fixed; its not useful all the time. As you have a lot of content that must be scrolled down to be seen i would opt for a background-attachment: scroll;


#4

Pretty good job @Hannahllmm still some work needed



You can see the images i have uploaded there is problem with the mame at the top try to fix this. Instead of this it looks great.


#5

Thank you for taking the time to give feedback!!
I’ve added that first bit of code you suggested, I have no idea how it’s changed anything though :joy:

Im not quite sure what you mean by

First apply size or word-break policy for the title. For small width, the title text causes the horizontal scrolling which breaks responsible for small screens. ( word-break: break-all )

I added (word-break: break-all) to the header but it made the words separate when the screen was resized, which isn’t what I want :confused:

I’ve changed the size of the images, used “em” rather than “px” in some placed, added some line height
and made the quote font italic.

If you could spare some time to explain the bit I’m confused with that would be amazing!! Thanks again for the feedback!!


#6

I’m not entirely sure how to go about changing that :joy: :confounded:
Could you offer any guidance? Im very new to coding


#7

What do you mean by this? As far as I am aware you can still scroll through the content even when the background is fixed. But when I get some spare time I might see if I can create a parallax scrolling effect


#8

Yes I know word-break at any place(char) is not a good idea, but when a text gos lengthy in both data and visual size(Like Attenborough), it may causes some issues(very rare, not critical most of the time, but possible, like your page which causes horizontal scrolling)

Overall is good, you should keep working, and learn and bring new stuffs .

Keep going on greta work! happy programming.


#9

@Hannahllmm try putting this in yout html

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

This is to make text responsive.


#10

If you do this the whole text on the page will become responsive. Ypu can experience the changes in chrome debugging mode.


#11

I’ve added (font-size:9vw) to the title style so it scales down when the screen gets smaller. I think this fixes the issues?

I tried adding the code you mentioned but it didn’t seem to do anything, not sure what I was doing wrong.


#12

You cant see any changes because you already used bootstrap framework and used col-md-*
for the grid, can even do class="col-md-12" for the title instead of (font-size:9vw).