[Underworldproblem]

-Positioning elements is very hard

I need ideas/ suggestions on the designs and additional items I could add.

If you see things unaligned, please let me know.

P.S. Everything was made from scratch except the background. I found it on google images.

Updated Version:

[Xual]

Everything looks good, except the top navigator. I don't know how to explain, but I'm not a big fan of the top navigator. Also don't forget to add mobile support if you haven't. 🤝

7,8/10

[Rushax]

Looks really nice to be fair, does it work universally across all devices/browsers?
Only two very small points I'd say is there could be a little bit more padding to the navigation, I like it just a bit more spacing for the white opacity each side.
The bottom two icons for is it Steam & Twitter? The top borders haven't been rounded off but bottom both have. I'd say make it one all the way around.

To help you with alignments try frameworks such as materialize / bootstrap. They're supported by all major browsers and once you're competent, they save you so much time and it's very little effort to account for other sized devices.

9/10

[Underworldproblem]

Everything looks good, except the top navigator. I don't know how to explain, but I'm not a big fan of the top navigator. Also don't forget to add mobile support if you haven't. 🤝

7,8/10

Looks really nice to be fair, does it work universally across all devices/browsers?
Only two very small points I'd say is there could be a little bit more padding to the navigation, I like it just a bit more spacing for the white opacity each side.
The bottom two icons for is it Steam & Twitter? The top borders haven't been rounded off but bottom both have. I'd say make it one all the way around.

To help you with alignments try frameworks such as materialize / bootstrap. They're supported by all major browsers and once you're competent, they save you so much time and it's very little effort to account for other sized devices.

9/10

Check the updated version now. I showed how the navigation bar looks when you hover over it as well.

Where are some good places to learn about mobile and tablet compatibility?

Thanks.

[Rushax]

To do your own custom mobile compatibility you'll want to look up media queries.
For example desktops range from 1500px plus whereas tablets and mobiles and anything under are 767px and under usually.

Let's say for example you're body background was black for desktop, ultimately you could change it for mobile if you wanted, as shown in the code below.

Code

body{
background-color: black;
}
@media screen and (min-width: 480px) {
    body {
        background-color: white;
    }
}

This can also be tested by resizing the browser and using the developer options for your browser.
Plenty of material on W3CSchools and Google pretty much.

Best of luck.

[Underworldproblem]

To do your own custom mobile compatibility you'll want to look up media queries.
For example desktops range from 1500px plus whereas tablets and mobiles and anything under are 767px and under usually.

Let's say for example you're body background was black for desktop, ultimately you could change it for mobile if you wanted, as shown in the code below.

Code

body{
background-color: black;
}
@media screen and (min-width: 480px) {
    body {
        background-color: white;
    }
}

This can also be tested by resizing the browser and using the developer options for your browser.
Plenty of material on W3CSchools and Google pretty much.

Best of luck.

Thanks. I'll see what I can accomplish. I will post an update soon.

[Eagle 95]

Just a small suggestion, place spoiler tags because that image is too big. Design looks alright, you've chosen the right background image, rest just clicked into place.

Code

[sp]image goes here[/sp]

[Underworldproblem]

Just a small suggestion, place spoiler tags because that image is too big. Design looks alright, you've chosen the right background image, rest just clicked into place.

Code

[sp]image goes here[/sp]

Thank you. I appreciate the constructive feedback.