Hi there! This is kind of random, but I was wondering on AO3 how you size the art for your fics to make it look so nice on mobile? Like I notice a lot of fics tend to have the art too big and it makes it hard to see when reading on mobile, but Alby's art in "There Is No Shortage of Blood" is super easy to see every time. I'm going to be posting my Cap Big Bang fic soon so that's why I wanted to know :)
Hi! Excellent question, I had no idea how to do this until someone explained it, I think when I was participating in CapRBB. Iām gonna explain in words without nice screenshots, apologies for that.Ā
What you need to do is set a Work Skin (an extra little bit of formatting code attached just to the work to, in this case, tell it to scale the size of the picture to the size of the screen) when you post the ficāitās the last option in theĀ āAssociationsā box that also includes selecting a collection, gifting, etc.Ā
Iām not 100% sure what the actual code is in the skin we used on There Is No Shortage of Blood because @artgroves set that one up, but I know that for my RBB fic, I made my own work skin.Ā
You can set one up by going to your AO3 dashboard and looking at the left sidebarāthe last option in the top grouping (after Dashboard | Profile | Pseuds | Preferences) isĀ āSkinsā and clicking that will take you to a screen where you can click theĀ button that saysĀ āMy Work Skinsā (it defaults to My Site Skins, which is where you can do things like set up your own color scheme for the entire AO3).Ā
UnderĀ āMy Work Skinsā if you donāt have any set up yet it will have a link that says something likeĀ āWhy not try making one?ā and you can click there to get the form. Name it something useful and obvious likeĀ āResize images for mobileā and then paste in this little piece of code in the CSS box, which I faithfully copied from someone else who understands CSS:
#workskin img { Ā max-width: 90%; Ā height: auto;}
And then scroll down toĀ āSubmitā the skin. After that, it should be available in the drop down next to Select Work Skin whenever you go to post a new work (or edit an existing work, if you forget to do it when you first post!)Ā
This particular version of the code, as you can see, tells it to scale the image to 90% of whatever the screen size is, with the height scaling automatically along with width so the image doesnāt get squished or stretched. You can set that percentage to a slightly different number if you care to, but 90% seems to work pretty well!
