Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

layout change?

A topic by verysoftwares created May 05, 2022 Views: 993 Replies: 9
Viewing posts 1 to 4

has there been a layout change on creator pages?

the 7th featured game on https://verysoftwares.itch.io isn't centered anymore, and the descriptions for my games in collections are cut off.

these may be little things but they lower the usability of my page, i'd like the old layout back.

Moderator moved this topic to Questions & Support
Moderator

If there was a change, it doesn't seem to impact pages without custom CSS. Maybe some classes, or how elements are nested.

Admin (3 edits) (+1)

Yes there have been some changes. We pushed out some CSS updates to all grids across the site to make them consistently use CSS grids. Sadly, we no longer support having trailing items in a gird be centered with this change. In order to ensure consistency and ease of development for common UI elements across the site sometimes we have to make these types of changes. Thanks for understanding.

Regarding the font clipping, I’ll have to take a closer look. On quick inspection it appears that the particular font you have chosen is bugged as has the wrong line-height though. I’m not sure there’s anything we can do about that. It’s even broken on the Google Fonts website: https://fonts.google.com/specimen/Concert+One (Try highlighting text to see that it doesn’t cover the entire height of the text)

(3 edits)

thanks for the response. however, i didn't mean font clipping, i meant how the taglines for the lower games are cut off with '...' because they're part of a collection. this seems like an intentional change; i wonder why is that?

i tried to expand the tagline text area with custom CSS:

div.game_text {
height:250px;
}

..but it still doesn't show the full taglines, only the whitespace grows. any pointers?

(1 edit) (+1)

i figured it out. for anyone else who wants to show collections' full taglines on their game page, the custom CSS is

.game_grid_widget .game_cell .game_text {
white-space: normal;
}
(+1)

AHHH thank youuu

Is it possible to center the bottom game using custom CSS? Or force it back to the old flex display on just my page? I got access to the custom CSS option several years ago because I'm really particular about how my games display on my page; I'd really like to be able to center the bottom game if possible.

Admin (3 edits) (+1)

As mentioned in the CSS guide we encourage people to not make significant changes to built in UI as you can introduce incompatibilities for mobile devices, accessibility, in addition to resulting in breakage when we need to make updates.

That said, I added a few more CSS variables to the grid container so you can switch to using flexbox with centered items with something along the lines of:

.mode_grid .user_game_grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.mode_grid .user_game_grid .game_cell {
  width: var(--itchio_grid_cell_width);
}

(Note that the page previously never used flexbox, but was using inline-block elements with some margin tricks)

This worked perfectly and unlike the other changes I was trying it doesn't break on mobile, thank you so so so so much! Yeah I try to be very minimal and specific with my CSS changes to avoid introducing those sorts of issues, thanks a ton for adding such an easy fix for users like me!

This topic has been auto-archived and can no longer be posted in because there haven't been any posts in a while.