Let me know if there are others tutorials you want me to write. To avoid the pre code (if you have on your posts) to overwrite the post box, use this css:Īs a good person I am :^), I’m going to drop the code for the captions here: 8em, for example, and 1em in the media query.Īpply a max and width of 100% to images and players:

If you think that the font is too big for desktop, you can apply the font to. Now our theme is fully responsive!!!!!!!!!!! The only thing I need to talk about is:Īpply font-size of 1em and a line-height o f 1.8 to the body so the font will be nice in every screen size. We’ve also added a 100% width to both wrapper and box div. We made sure our post wrapper are not floating to the left anymore and unset the max-width of our post boxes. We also have a max-width, a float and a width applied on our desktop version. The best way to see what you’ll need to unset when breaking your theme into a mobile version, is just to look what codes you used on the desktop ver and try to change on mobile. Since we don’t need the solid layout anymore, we unset the max-width of the box and added a 100% width just for consistence purpose. We also, unset the transform css we used to center the sidebar, and added a margin top and bottom of 3em to have some room between the top of the window and posts. Instead of a width of 20% we now use 100% to make sure the sidebar will fill all the content, its parent. What we’ve changed? Since our sidebar was fixed positioned, we unset that using position:static, the default position of everything html. Now, to edit the sidebar on mobile, inside the query, add: We have our blocks and variables and I wrapped the inner content of the inside the query and added a width of 90%, for example. First thing is to understand what we have in the code. I did a base code so I make this tutorial following the code, to avoid issues. I’ll not explain how to, for example, how to put dates, captions, tags, pagination, and other custom stuff, okay :) ✩⁺˚ Basic Base Code ✩⁺˚ I’ll explain only how to wrap correctly the tumblr’s blocks and the very basic structure of a responsive theme. You really need to know your way with html and css, plus, you’ll have to style all the other stuff (text decorations, links, dates, audio, asks.) on your own. This tutorial was requested by an anonymous person.

How justify text in html tumblr