Tumblr Template Creation *COUGH* frustration

… this isn’t entirely going as planned 🙉🙈

So, the base of the template for my Tumblr blog is finished, hence I slowly started to customize it. The customization isn’t there yet (what you see here is merely an example of the layout), and I also need to style the ‘’Ask’’ and the ‘’TOU/Info’’ page. BUT after I tested the template on 2 different screens I discovered that the template scaling is rather sloppy ._.

The first picture is how it should look like, it’s how it is viewed on my laptop, which is where I built the template on. The second picture is taken on a wide-screen from a desktop computer.

It will look just fine to everyone who views it on a small screen, but I’m sure there are many people who use wide-screens nowadays as well. It should also look fine on even smaller screens, the background image will then slide behind the posts wrapper, which isn’t too bad. The most important thing is the navigation and the ability to view the posts after all.

I simply can’t stand the fact that on bigger screens the image sticks so far to the right and then leaves a black hole in the middle. On top of that, the layout seems to squeeze itself to the left upper corner. It just looks like a big nope. Nonetheless, the (background) image has to be fixed to the right corner, otherwise it will literally float in the middle or way too far to the left. On smaller screens it would be pushed behind the posts wrapper all the same.

So, the valuable thing that I have discovered in the end is that the most ideal place for a fixed picture would be left because however the template looks like and whatever design you use, the page will always resize itself from the right to the left. Everything that is fixed to the left is in a safe spot, so to speak. In this case, you can put a fixed picture left, and then place the navigation (wrapper) and the posts wrapper next to it (or vice versa), as long as you leave enough space in the right spot so the body elements won’t fail to resize in smaller screens. Then the question remains, why do I want my picture to the right? I’m stubborn, apparently 😑 If my wish was to have a picture to the left then I could have just used a pre-made template. I’m sure there is a work-around, which requires a much higher knowledge of html and css coding. If you don’t know what you’re doing then you’ll most likely mess it up even more :x

It feels like I’m soon going to face a stalemate; should have known this bit of info before I started working on a template from scratch 😂😪 /facepalm