Games Offset in Shop

Site Feedback
1

I am using Google Chrome, and this is what I see when I look at the Coin Shop right now:

image
image958×555 184 KB

That spacing between the games in row 1 and row 2 are clearly different.

It just irks me a little to see this, clearly it doesn’t affect the functionality of the site, I thought about it for a while before saying something about it…

Please put this on a very low priority list, since it’s merely aesthetics.

Cheers!

EDIT:

As noted by @kylehayman361 below, it also shows up at the bottom of the coin shop:

image
image930×554 164 KB

15 Likes
2

Just confirming I see it as well on chrome, offset for 2nd line in the shop is off compared to the rest.

7 Likes
3

yup, same on firefox, keen eye you got there, don’t think i had seen that before (tho might been a recent “update” ofc)
:+1:

8 Likes
4

Hmm, will have @frst take a look.

7 Likes
5

Same. This rule seems to be causing it:
image

Changing it to
image

Seems to fix it on chrome at least.

11 Likes
6

The actual problem is that the justify-content: space-between isn’t working as apparently intended, because of the ::after pseudo-element on the shop selection messing up the justification, since it fills the space that would normally be used to space apart the elements.

Get rid of this CSS (i.e. remove the ::after pseudo-element) and it’ll be fine.

.shop ul.chrono-shop__games::after {
	content: "";
	-webkit-box-flex: 1;
	-ms-flex: auto;
	flex: auto;
}

Also, because of how justify works, you don’t need the 2% margin at all, so you could also remove this part (unless it does something for smaller screens, I guess):

.chrono-shop__games > li:not(:nth-child(4n)) {
	margin-right: 2%;
}
13 Likes
7

I see this is starting to go way over my head… :sweat_smile: I hope you work your :mage: magic, or whatever it is that you do!

4 Likes
8

Now I can’t un-see it. Thanks a lot, guys.

9 Likes
9

I am sure it will get fixed soon enough… :smiley:

4 Likes
10

Coin shop is unplayable please devs we need a patch.:grinning:

9 Likes
11

its also on the bottom row of the coin shop too.

edit: jokes on you @YQMaoski I like my name really big so everyone can see :wink:

4 Likes
12

I was just giving credit where due. :smile:, wasn’t meant to be a joke. :wink:

3 Likes
13

It just made me laugh 'cause I read big text in a Brian Blessed voice xD

and who knows, maybe they would have missed the bottom line being the same and we’d have to do this thread aaallllllllll over again xD

4 Likes
14

CSS is frustrating. I don’t know how people do this stuff for a living without breaking everything and cursing out Internet Explorer @eishiya lol

7 Likes
15

I think that’s the idea, they do it for a living.

4 Likes
16

Simple, we don’t care about IE users.

7 Likes
17

Yea there are a few overlapping styles that need to be cleaned up. The after was intended to fill the gap if there aren’t 4 on the final row as it wraps but obviously some things are conflicting :stuck_out_tongue:

We’ll get a fix out for this soon. Thanks for the help everyone!

7 Likes