Tribute page to Commander Shepard [feedback more than welcome !]

Tribute page to Commander Shepard [feedback more than welcome !]
0
#1

Hi guys !

I just made my first tribute page : https://codepen.io/Al3x91/full/EgpBYB/
I know that my code is messy but I have my wrist on a cast so it’s a little bit difficult lol

I know it’s not beautiful and I would like some tips like:

  • More ressources on how to position the div, I had a hard time with that

  • Why my title "commander shepard doesn’t stay inside the “box” on my phone ?

  • And what can I do to make the class=“well” fit the text inside them or give them the same length and still having them at the center of the body one under the others ?

Thanks a lot in advance for your help !

#2

+1 for Femshep :thumbsup:

There’s a CSS rule, overflow, that dictates what happens when content is pushed outside the boundary of its parent. By default, it’s set to visible, which means that you’ll see the content unless it’s blocked by another opaque element. Since everything except the background is transparent, we get to see your title escape the confines of its parent. While one option is to change the overflow property on your title box, I think the best solution would be to change the font size when the screen gets narrower. I went ahead and wrote up a media query to do just that. You can copy and paste it to the end of your CSS, if you’d like.

@media(max-width:900px) {
  .titre {
    font-size:  1.7em;
  }
}

I’m not exactly sure what you’re asking, but you may want the text-align rule which, despite its name, will align more than just text. Try using text-align: center in your container div.

#3

Some people just want see the world burn!

@Al3x91, I think its not bad for a first attempt at a website, not bad at all. I think the background detracts because of its quality tho.

how about this? Higher rez makes a huge difference (be careful not to use too high or the bandwidth required could slow your site)

femshep.JPG1734x846 179 KB

or

sheshep.JPG1736x851 247 KB 

body {
  background-image: url(http://cdn.wonderfulengineering.com/wp-content/forum/uploads/2014/04/space-wallpaper.jpg);
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

CSS Tricks - perfect full screen background css

#4

I quite like it, definitely better than a lot of my initial webpages.

Just to follow up on PortableStick’s post,

This is occurring because the div that contains your title has a width of 50%. 50% at full screen is fine because there is enough width to contain the title but as the browser gets more and more narrower, 50% is too narrow to contain the width of the text.

As already mentioned a Media Query is a good choice. You could also try your hand at using Viewport Font Sizing, like so

.titre {
  font-size:  3.5vmax;
 }

This will resize your font according to the current viewport - which is just a fancy term for the current part of the webpage your user can currently see.

#5

Wow thanks a lot for your answers ! I really appreciate it,
I have to admit that I did some of the code without really thinking bc I don’t know everything obviously so I’m not sure of myself yet I have a lot to learn !

I’m going to make more exercices before beginning the portfolio I want to make something more beautiful !

Thanks again :blush:

#6

Its true that you just dont know, what you dont know.

I feel like that A LOT :slight_smile: