Mini-Update: July 11
Filter
Show Official Posts OnlyReplies
thank you!! finally!! things are so much easier now THANK GOD
<p>Actually it&;s really bad on mobile, because even more scrolling - sideways. But that has to be taken the way it is now, anyway :-(
To give a simplified explanation: designing for mobile is weird because 1 pixel on the device screen might not be equal to 1 pixel in the CSS.
For instance, here I have Subeta's "mobile" layout open in an iPhone 6 emulator:
You can see that the size of the screen here is 667 x 375. (It's written at the top.) However, if I inspect the webpage to find the size of the elements on the page:
Ignore the height - it's large because the page scrolls - but note that the width is 1000px, rather than the 667px you'd expect. That's the width of that element. That's how wide the webpage thinks the screen is, and all of the calculations done on that webpage use that size.
So basically, the webpage might know if you're on a phone or a computer, but it doesn't know the actual size of whatever screen you're on. In this case, the webpage can't make accurate calculations to make it look nice on mobile, because it doesn't know that the device is actually 667 x 375.
To get around this, you need to have a specific line of code that gets the actual size of the screen/device for your CSS to work with. Otherwise, the website will be rendered essentially the same on mobile and desktop devices - which is what's happening on Subeta right now, because Subeta's current layout is missing this line. I've tried to simply add it in, but adding it actually causes more things to break since so much of the site was coded without it.
more technical stuff in here
If you're curious, I'm talking about the viewport meta tag, which goes in the HTML head and is used to control the viewport. You can read more about it on this page under the title "Setting the Viewport".
Without this line, not only will small tricks like min-width not work, but media queries can also get really confused. This article on the topic gives a more in-depth explanation, here's a relevant quote:
🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights
You can't make it look specifically for my desires. Of course not! ;-) That was clear, anyway.
I was asking for a custom CSS. For the computer layout. Did so in the Help Board.
I like the old way better. Because of large pet images and also simply being used to it.
The new training page looks nice! Just curious though, would there be any kind of way to have your pet boxes be moved to the center of the page if you have less than one line of pets? I only have two pets total, and it just looks a little weird with them both squished to the side.
If it's something that would be too difficult though, don't worry about it. I know I'm in the minority having so few pets. :P
"Random usability/UI enhancements!"
This is awesome. The pet training page looks so good and I like how the "stock now" button hovers as you scroll. It's great!
I don't think I could center them without making it weird for users who have more than 4 pets, unfortunately! Because then the last row would be centered so it wouldn't be lined up with the rows above them.
🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights
Thanks for all the hard work. These are awesome fixes!
Training center looks spiffy. Now I need three more pets for an even 20!
Forum Art by
Signature Art by
I just noticed the training center update right before I went to bed last night. The page looks a lot better now, thanks!
Forum art by me
For me the training center will take some getting used to. I've almost clicked autotrain a few times when I don't want this lol. But ultimately it will be better for the page is not as long.
he/him / 31 / EST |  | My best friend is |
I love the way the training center page is now, much less scrolling, yay! <3
[Center] [Kiss=Hunger] CW Shop||https://subeta.net/user_shops.php/shop/26066">CW for sale/trade Style File [/center]
awesome awesome new training center! having recently adopted my third pet this is perfect timing! woohoo no more scrolling! i'm imagining those with tonnes of pets to train would find this heaps more helpful than me, but i still love it. totally unexpected and awesome so thanks!!!
lovely art by
"grey would be the colour if i had a heart" ~nin ❤️
Bug, thanks for the new layout in the training center. It's looking great!
YOU ARE BEST BUG. I will do my best to never (knowingly) squish another bug. They get added to my 'no-squish' list, along with snails and non-nasty spiders.
Seriously though, you're doing amazing work.
Oh wow! Thank you!
I went to the training page before reading this and I was so excited with the lovely new training page. I only have 10 pets, but even so its so much better. People with oodles of pets must be over the moon!
Less scrolling nearly always = way better!
In loving memory of Need posting achievements?Then join Posting Frenzy Achievement Items - searchable list List of Borders and cutouts New at Fresh and Flavorful Ping Group
Hi, thanks for the various improvements you have made to the site. Just a minor request though, if you don't mind. I wonder if some minor tweaks could be made to the divs in the training centre so that they are more specific to that page. I'm one of the few people who actually work better with the older TC layout since I tend to resize my windows to half and multitask on two side-by-side windows at the same time. The way the current layout for the TC works, it would squeeze the divs and make them expand length-wise when I keep my windows to half-screen size. That way the page is actually just as long as, if not longer than the old one for me. I tried whipping up some custom CSS but it can't be done without messing up the Forum Group pages and the Quick Stock page.
|
it's cool that more pets are visible at once on the training page (for people who actually train more than one pet), but now each block is thinner and longer which pushes the buttons off the bottom of the page so now i have to scroll down to actually train them... is there any custom css that makes the boxes more compact (e.g. smaller pet image, less padding...)? plus i only train one pet so having even more visible at once is kind of distracting :/
