Are you trying to use the Steam Client but find that the text and controls are too small to read and use easily? Are you dumbfounded why there are no settings or keyboard shortcuts to make everything bigger? If so, then today is your lucky day…
The above screenshot is what the default skin looks like when you use the Steam Client on a 1920×1080 display. If you have your face mashed up against the screen then you can read the text no problems. If, however, you are seated back a bit from the screen, or have a high-resolution screen, or just don’t have eagle-eyed vision, then the text can be really, really hard to read.
There is no setting in the Steam Client that lets you simply make everything bigger. The community has been asking for one for years, and years, and years but Valve doesn’t seem to care that much. They ‘recently’ let you, kinda, sorta, make some things bigger in the Library, but that’s of limited value to most people who spend far more of their time exploring their Discovery Queue (or using other parts of the Steam Client).
If you’ve got a couple of minutes of time you can apply a zoom to the body of the interface that turns the above into this:
A much better use of space — and much easier to read.
Everything (except the chrome) can be scaled or zoomed up by as much as you like.
On Linux you merely have to issue five commands on the command line to zoom everything a bit larger. This is all it takes on Ubuntu 18.04 (Mint 21, Windows and MacOS instructions at the end of this post):
cd ~/.local/share/Steam/
mkdir -p skins/bigger/resource/styles
cp resource/styles/steam.styles skins/bigger/resource/styles/
cd skins/bigger/resource/
echo ':root { zoom: 1.5; }' > webkit.css
I chose to name the new skin “bigger” — change it to whatever you like. A zoom of 1.5 (150%) is what I, personally, prefer — also change it to whatever you like.
In the Steam Client…
- Steam » Settings » Interface
- change the skin from the default to the “bigger” one
- click OK and restart the Steam Client
That’s it. You’re done.
Enjoy!
PS: If you’re anything like me, and spend most of your Steam Client time exploring your Discovery Queue, then you may want to consider improving that experience further by adding a bit more style to the webkit.css file. Mine looks like this:
:root {
zoom: 1.5;
}
.breadcrumbs, #application_root, .store_tooltip,
.queue_reason_description, .queue_btn_ignore_menu,
.mature_content_notice, .queue_controls_description,
.broadcast_embed_top_ctn_trgt {
display: none !important;
}
#store_controls {
position: fixed !important;
top: 0px;
right: 0px;
}
#store_nav_area {
top: 0px !important;
}
div#store_header, div#store_header .content {
height: 40px !important;
}
.html5_video_overlay {
zoom: 0.666;
}
.screenshot_popup_modal {
zoom: 0.666;
}
The extra styling gets rid of annoying stuff that long-time users simply don’t need, and it sticks the wishlist in the top-right corner. I like it. You may like it too.
Note that the way Valve have coded their video volume slider means that it gets more and more flakey the higher your zoom level. The only way to make it function normally is to restore it to a normal (effective) zoom of 1.0 — thus .html5_video_overlay has its zoom set to 0.666. The :root zoom of 1.5 multiplied by 0.666 gets us back to 1.0. If your chosen :root zoom is giving you problems with the volume slider, set the .html5_video_overlay zoom to: 1 / :root zoom. Alternatively, control video volume using your keyboard and the system volume.
Game screenshots are already big, so they get reverted back to 1.0 as well.
PPS: Although the above instructions are for Ubuntu, because the Steam Client’s directory structure is the same on all platforms, you can easily do the same thing on Windows and MacOS. You just need to make a few directories, copy the default steam.styles file into one of them, and create a webkit.css file in another. Edit the latter with whatever text editor you prefer.
- In Mint 21:
- The path to the Steam directory should be:
- ~/.steam/debian-installation/
- Everything else is the same as above.
- The path to the Steam directory should be:
- In Windows:
- The path to the Steam directory should be:
- \Program Files\Steam\
- Create all missing directories up to and including:
- \Program Files\Steam\skins\bigger\resource\styles\
- Into that last directory, copy the default Steam styles file from:
- \Program Files\Steam\resource\styles\steam.styles
- And create the text file for your custom CSS:
- \Program Files\Steam\skins\bigger\resource\webkit.css
- The path to the Steam directory should be:
- In MacOS:
- The path to the Steam directory should be:
- ~/Library/Application Support/Steam/
- Create all missing directories up to and including:
- ~/Library/Application Support/Steam/skins/bigger/resource/styles/
- Into that last directory, copy the default Steam styles file from:
- ~/Library/Application Support/Steam/resource/styles/steam.styles
- And create the text file for your custom CSS:
- ~/Library/Application Support/Steam/skins/bigger/resource/webkit.css
- The path to the Steam directory should be:
tp69 
Thanks bro, I’am only having an issue with my wishlist, I have 54 itens in there and as I scroll down the page everything starts to.. how I can say.. like disappear ?
Nothing seems to have changed. 😦
SilverLightPony, it’s been many, many years… Still waiting for Valve to fix their broken client. /sigh
I didn’t try in Ubuntu 18.04, so idk if the literal steps in this webpage work. But the following steps are for Ubuntu 20.04:
mkdir -p ~/.steam/steam/skins/bigger/resource/styles
cp ~/.steam/steam/resource/styles/steam.styles ~/.steam/steam/skins/bigger/resource/styles/steam.styles
echo ‘:root { zoom: 1.5; }’ > ~/.steam/steam/skins/bigger/resource/webkit.css
Greetings.
Style, the commands you listed are functionally the same as the ones I gave. I just broke them up into shorter ones so that WordPress wouldn’t line-wrap them and they would be easy to ready and copy. 🙂 I haven’t made the move to 20.04 yet, but good to know nothing on that front has changed. Cheers.
@Tim: Yes and no.
Yes: The commands are the same as you say (in fact, I extracted them from you), and yes, you broke them to make them shorter.
No: The folders (and hence, paths) are not the same; in short: from “~/.local/share/Steam/” to “~/.steam/steam/”. At least in my case.
I could have just point it out, but I guess, it’s easier and clearer if I just write the whole commands, so you anyone can just copy and paste.
Greetings.
Style, on my 18.04 system ~/.steam/steam is a symlink to ~/.local/share/Steam/. So both end up at the same place (~/.local/share/Steam/). Is it different on your 20.04?
@Tim: In my system, there’s no “Steam” folder, so no ~/.local/share/Steam/ path.
I have to add, just in case, that I installed Steam app from Ubuntu repository, not from Steam webpage. So idk if that makes some difference.
Style, that’s interesting. The Steam website directs me to download steam_latest.deb from repo.steampowered.com. One would think that would be the same thing as gets installed by issuing the command sudo apt-get install steam-installer in the terminal. If you don’t have ~/.local/share/Steam/ then could it be that you installed Steam without sudo? If so, then you may have installed steam for single-user use only, and not for multi-user use, which would explain the absence of something in ~/local/share/. I’ve written and use software that launches and interacts with the Steam client — and prefer to do that as a different user with restricted privileges — so I always install Steam with sudo. Can’t remember the last time I installed it any other way. 😉
@Tim: Installed with sudo. Well, actually I installed it from Software Center “Discover” (I’m using Kubuntu). But, it obviously asked for my password to install. Would that make a difference?
Plus, I want to add that I’m the only user in my system. I guess it shouldn’t ‘matter’ in the subject, but I’m still saying it, just in case.
Try using only this in your new custom webkit.css …works great to make the video much bigger on the game pages. few hours of noodling with studying the elements on the steam pages and experimenting with the css…..Enjoy…Nick
—–webkit.css snip start——-
#game_highlights {
width: 1600px;
/* This sets the width of the entire highlights section,
video and image on the right */
}
#game_highlights .leftcol {
width: 1276px;
/* This set the width of the left side column that holds the video
The video will scale up to fit.
leftcol.width + rightcol.width needs to be less than game_highlights.width */
}
#game_highlights .rightcol {
width: 324px;
/* This sets the width of the right side column that holds the image
and user feedback info. The width of this in the sample page
that I worked from was 324 pixels = 324px, reference page “Roki” */
}
—–snip end——-
Nick, personally I don’t “Autoplay videos” when exploring my Discovery Queue. Since 99.99% of the games are not to my liking, 99.99% of the videos are of no interest either, so there’s no point me playing them, wasting bandwidth and decreasing the responsiveness of Steam in the process. If something looks interesting I prefer to play the video full screen. So, the game_highlights changes are not something I want to make to my setup, but perhaps something others will be interested in. Thanks for sharing!
Having the zoom is great, but as mentioned by the first commenter here, the wishlist breaks. If you have a large number of items, as you scroll down, it starts removing visible items starting from the top of the window. Any idea on a fix for that?
Ryan, I don’t have anywhere near 54 items on my wishlist, so I can’t reproduce that symptom. My wishlist scrolls normally. So, sorry, no idea.
There is no “bigger” one only default. Valve is disgustingly lazy.
Jak, I agree. Valve seem to have plenty of time to add useless crap to Steam, but not fix a fundamentally important issue that has annoyed thousands of users for years — a sure sign that their values are not aligned with those of their customers, and they should lift their game.
Unfortunately, this had no effect. I see the new skin, and was able to change to it in the interface, but everything is the same size as before.
Thank’s for the guide. I’m in no way a programmer but following your istructions I succesfully enhanced Steam. I also used Nick’s code to have bigger videos. I’m having problems with the wishlist that simply disappear when scrolling down past a certain number of games. It seems to me that the problem may be caused by the limited size of the wishlist container and it’s overflow property set to hidden. Could you take a look and help me solve this issue? A simple solution would be to not apply the zoom in the wishlist page, which for me would be perfectly fine, but I don’t know how to do it.
David, the CSS works on the current version of the Steam client. If it’s not working for you then the chances are that you’ve just made a small typo in the code. It’s easy to do and results in CSS being deemed invalid and ignored.
I kept experimenting and came up with a fix for the disappearing wishlist issue.
Just add this:
.wishlist_row {
zoom: 0.833 !important;
}
The principle is the same Tim used to solve the video volume slider and since I’m using a 1.2 zoom I need to multiply by 0.833 to go back to 1.
My solution isn’t too elegant since it leaves a void between the last entry in the wishlist and the bottom of the page but it’s currently working for my 126 games long wishlist.
Sam, although I don’t have enough items on my wishlist to replicate the issue, I have just spent a fruitless half-hour or so trying to just disable the zoom for the whole page. This was my approach:
:root[href*=”wishlist”] {
zoom: 1.0 !important;
}
The idea was to use an attribute selector, perform a wildcard match on the word “wishlist” as it appears in the URI, and then set the zoom back to 1.0. It does not work, but someone might be able to get it work with some more effort.
I note that you’ve just basically solved the problem — congrats! Hopefully Ryan and the others will notice your solution. Do you mind if I make a mention of that in the article itself?
Sam, I’ve looked into that page some more and, what can I say, wow… Valve have implemented it in the most bizarre way. Scroll events fire off some Javascript that pre-emptively loads and unloads game entries (rows) from a scrolling window so that only a fixed amount are loaded at any one time. The positions of those entries are calculated dynamically and specified in pixels.
Any high-schooler that graduated in the last decade or so would just load the lot in a sequential list. Perhaps lazy-load them if performance was a concern. It is truly baffling…
I don’t mind at all that you include my solution in your article.
Here is the final version which correctly displays the whole wishlist without leaving the void at the end:
#wishlist_ctn {
zoom: 0.833 !important;
}
For anyone using this just remember to change the zoom value depending on the zoom value you used with the :root selector.
Sam, I appreciate you finding the fix for the wishlist issue, I was having that issue as well. I ended up going back to the default skin, as there are numerous wonky things that happen in the library interface as well and I didn’t want to deal with it. Right clicking on a game in the left sidebar would pop up a menu down and to the right of where it was right clicked, and the menu would be buggy if it was near the bottom of the screen. There was also some strangeness with interacting with collections, that I can’t remember the details of. Maybe someone more code-savvy can hack those into shape, but for now, I’ve forgone zoom and just gone with Nick’s larger videos on store pages code. Sigh.
Ryan, because Valve have so heavily used pixels for dimensions, and manipulated layout and controls with Javascript, there is no way that CSS alone can be used by users to scale ‘everything’ in the Steam Client and retain full functionality at the same time. It’s just not technically possible. The best that anyone can hope for is to just scale the bits that matter to them, the best they can, and hope that Valve fire the web designers/developers they currently have on payroll, or at least migrate the client to a different browser base that supports native scaling (like pretty-much every modern web browser on the planet).
Thank you for this. I had to use the directory that Style used above, as I didn’t have ~/.local/share/Steam/ in Pop Os, either.
Mel, I’m glad you worked it out. Hopefully you’ll end up with an interface that’s easier to read with a minimal amount of side-effects.
God bless you!
1.25 is perfect for me on an Asus Flow X13 (1920*1200 13”). This is awesome
So, I am trying to get this to work on Windows 10 but can’t seem to do it. In my Steam folder I have created the following: D:\\Steam\skins\bigger\resource\styles and in the styles folder I placed a copy of my steam.styles document. I have also created a webkit.css text document in the resources folder. I will point out that the steam.styles doc is an actual styles doc whereas the webkit.css text doc does not change into a css doc, it remains a text document. In the webkit.css text document I have pasted the following:
cd ~/.local/share/Steam/
mkdir -p skins/bigger/resource/styles
cp resource/styles/steam.styles skins/bigger/resource/styles/
cd skins/bigger/resource/
echo ‘:root { zoom: 1.5; }’ > webkit.css
Under the Steam settings I can see the “bigger” skin however nothing happens when i switch over to it. Clearly I am doing something wrong but can’t seem to figure out what it is. Might one of you all be able to help?
Fingers, on the paragraph immediately above those five lines I wrote: “On Linux you merely have to issue five commands on the command line”. Nowhere did it say that on WIndows you could copy and paste those lines into your webkit.css file. I think you need to read the whole article again — slowly and carefully.
Works great.
I use ubuntu mate.
I just copied the vanilla resource folder on:
/home/yourname/.steam/resource
paste into, you might have to create this path:
/home/juan/.steam/skins/bigger
-> the folders “bigger” and “skins” did not exist, i had to create them.
Then just modify the webkit.css file, i copied the contents provided in this post and replaced all the info that my original file had.
Restart your steam client and choose the “Bigger” skin under settings, library.
Since my res is 1440p, and multiplying the zoom level by the video overlay level has to give 1 or close to, my values are:
zoom level 1.7
overlay zoom video 0.5899
This worked for me. GL.
Juan, thanks for the feedback and the 1440p tips. While it is not a perfect solution, Bigger IS better. 😉
This worked perfectly for me (after some trial and error) on Windows 10.
very good! thank you!
Mihir and Ash, I’m glad it helped. Enjoy!
Hey tim Thanks for making this post it works great for me on windows 11 and using juans slight changes but the only issue i found was that screenshots from storepages for games when opened were displayed way to big and you could only see about 1/4th of the image and i was wonder if there was a fix? thanks heaps
BeeOfAwesome, that’s similar to the html5_video_overlay issue — since screenshots are already big, you need to ‘undo the zoom’. Assuming you applied a :root zoom of 1.5, adding this to the end of your webkit.css should work:
.screenshot_popup_modal {
zoom: 0.666;
}
Although I don’t enlarge the screenshots normally, that’s such an easy fix/reversion that I’ve added it to my skin as well. Thanks for pointing it out!
Another thing I noticed was EULA agreements are zoomed in for the small window they show up in too
Not sure if anyone else has observed this (on Win10), but I opened my client just now and the scaling no longer appears to working in the Library page. I dare say the UI appears even smaller than the default(?) It still works in the Store, Community and Account pages.
Mihir, I’m using the Jan 31, 2023 build on Linux and the Library is still zooming as usual. If Windows has had an update that breaks zoom on the Library page, it hasn’t reached us in Linux-land yet.
Can confirm that it has now reached us in Linux land. Library is a smol boy.
If you put steam in dev mode and manually add a zoom to the library root element, it works fine. So it seems like it’s just not loading that webkit.css file anymore for the library. Unfortunately as of yet, I’ve not found a workaround myself. Other than squinting.
Yes, my Library has gone back to the smaller size as well. This is how Steam’s website advertised the change:
The All New Steam Library Is here
Steam library is getting a makeover to make it better looking, more relevant, and more powerful than ever before.
/sigh
The option is no longer there. I think it’s cause of phones as you can stream STEAM thru Steam Link on mobile devices which have a much smaller screen space so that’s their priority. Us few desktop users come in last.
We are a dying breed.