A Tribute Page for Alexander McQueen

A Tribute Page for Alexander McQueen
0

#1

Hello guys! This is my first webpage and I’m hoping for any suggestions on how I can improve the design and my code. Thanks ! :smile: Here’s the link : Alexander McQueen Tribute


#2

This looks very good, and very impressive for a first web page. I only have two things to comment on.

1- The eyes
I have a problem with the cover portrait. At many window widths, the eyes are covered by the text. That looks weird because in a portrait the one thing you expect to be visible is the eyes.

It happens a lot:
500px - 570px: covered by Designer Extraordinaire
695px - 1215px: covered by McQueen
over 1465px: covered by Alexander

Not sure how you can fix that though. I’m useless with Bootstrap 3 so can’t really advise. Maybe you can find a way to protect the eye area.

2- Responsive fonts
On mobile (I used the mobile view in Chrome dev tools), the paragraph font looks enormous, especially compared to the titles. Looking at how the fonts are defined, h1, h2 and h3 are defined in vw so relative to the viewport size whereas h4, p1 and a few others have their font-size defined in pixels.

Giving them a relative size would either make them too small for mobile or too big for desktop. Instead you can use media queries to change the font-size for bigger viewports. For example you could set the font-size of p1 to something suitable for mobile e.g. 16px or 18px and have a media query make it 22px for desktop.

The media query would look like that:

@media screen and (min-width: 950px) {
  p1 {
     font-size: 22px;
  }
}

#3

Hi, thanks a lot for the feedback! :smile: I’ve now edited the page and if you’ve got the time, can you look at it again? Bro/sis, I can’t thank you enough for introducing me to media queries! I’ve created different top margins for h1 for different screen widths so the eyes won’t be covered. Mostly, it looks fine on Safari - my default browser - as long as the viewport isn’t too wide. However, when I tried Chrome or when on a rather wide viewport on Safari, the “Designer Extraordinaire” falls off the screen. :unamused: I viewed it on my 5.5" screen android phone as well using chrome and it looks fine, both on portrait and landscape orientation. I’ve also given p1 and ul different font sizes for different screen widths. Anyway, thanks again!


#4

Well done with the media queries on p1. Do you think h4 could benefit from the same treatment or are you happy with it being quite big?


#5

Whoa great job! Just finished my first project and you are miles ahead so I don’t have much to say from a technical perspective. Love the background image and flow.


#6

I’ve given h4 different font sizes now and it does look better! Thanks! :smile:


#7

Thank you so much! :smile: