Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor layout bug on the Showcase page #64

Open
neonlifes opened this issue Mar 20, 2023 · 9 comments
Open

Minor layout bug on the Showcase page #64

neonlifes opened this issue Mar 20, 2023 · 9 comments

Comments

@neonlifes
Copy link
Contributor

When viewing from a mobile device, in the second section of games with half width image, the image and text extend outside the right edge of the screen.
Browser Firefox for Android, 1080x2400.

Screenshot_2023-03-20-16-33-0 5x

@neonlifes
Copy link
Contributor Author

Also this is how it is displayed when the Platforms string is too long.

Screenshot_2023-03-20-18-33-0 5x

@britzl
Copy link
Collaborator

britzl commented Mar 20, 2023

When viewing from a mobile device, in the second section of games with half width image, the image and text extend outside the right edge of the screen.
Browser Firefox for Android, 1080x2400

Ah, yes, that doesn't look like a very responsive design... It does however render as expected in Chrome on Android. I haven't checked Safari yet.

when the Platforms string is too long

Hmm, I'll look into this.

@neonlifes
Copy link
Contributor Author

when the Platforms string is too long

Hmm, I'll look into this.

Now displayed correctly. Thanks!

@neonlifes
Copy link
Contributor Author

Hi @britzl
Nice recent changes to the site, thanks for your work. I have a couple suggestions:

  • I use a 13" laptop with a 16:10 aspect ratio. It would be nice to have more information on the home page. It might make sense to change the scale of some elements. For example I'm attaching screenshots. The first one is the default page, and as you can see, not all the information fits on the screen. The second one is set to 80% scale in Google Chrome, and it looks better that way. I hope it's clear what I mean :)
  • Great idea to add the background from Void Scrappers. I think it would be nice to add some more backgrounds with good art that would alternate with each other.

100%

80%

@britzl
Copy link
Collaborator

britzl commented Sep 18, 2023

Thanks. Good feedback. The change was a bit rushed but we needed the change considering all of the new traffic coming to defold.com right now.

  • It might make sense to change the scale of some elements. For example I'm attaching screenshots. The first one is the default page, and as you can see, not all the information fits on the screen.

I wonder what the best approach is? Reduce the size always? Or use some kind of css media query?

  • Great idea to add the background from Void Scrappers. I think it would be nice to add some more backgrounds with good art that would alternate with each other.

I agree. We've already discussed this, but it will have to come as a second step. I'm thinking that the background image could be added to the game data (https://github.com/defold/awesome-defold/tree/master/games) and then we hand pick a number of games to alternate between.

@neonlifes
Copy link
Contributor Author

I wonder what the best approach is? Reduce the size always? Or use some kind of css media query?

Oh, I guess my knowledge is not enough to suggest anything. Just reducing the size is probably not the best option, as you need to check on different resolutions and aspect ratios. I unfortunately only tested on 13'' 16:10 with 2560x1600.

I agree. We've already discussed this, but it will have to come as a second step. I'm thinking that the background image could be added to the game data (https://github.com/defold/awesome-defold/tree/master/games) and then we hand pick a number of games to alternate between.

Yeah, that's what I meant. The main thing is that there are beautiful games to choose from 😊

@britzl
Copy link
Collaborator

britzl commented Sep 19, 2023

I've reduced the font size of the tag line and main links slightly.

@neonlifes
Copy link
Contributor Author

I've reduced the font size of the tag line and main links slightly.

Thanks @britzl
This looks closer to the desired result.
mainpage

@neonlifes
Copy link
Contributor Author

I'll add one more note to this topic. On the asset page, the "hero" image does not adapt well to the screen resolution. Here are two screenshots of the Def Video Ads asset for clarity. As you can see, in the mobile version the image is cropped and only a part in the center is visible. It would be nice to have the full image displayed at any resolution. As an example, on the Showcase page “full” images look the same in both desktop and mobile versions.

Asset page - desktop

asset-desktop

Asset page - mobile

asset-mobile

Showcase page - desktop

showcase-desktop

Showcase page - mobile

showcase-mobile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants