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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |