CODEWITHSUNDEEP
htmlcss
rnagolor
rnagolor

Reputation: 3

How to make a tumblr theme (specifically corner images) adjust to different screen resolutions?

I have a pleasant theme on tumblr ( mostlylagomorph.tumblr.com ) for a character "ask" blog. However, even though the theme looks nice to me, and the images are all in place, other users are claiming that, on their smaller (width-wise, I presume) monitors, the characters and speech bubbles are overlapping the main content box, like so:

[link]

Also, it's worth noting that the main content box is zoomed in upon- which makes me think that the entire theme simply zooms in upon itself when subjected to a smaller screen resolution/size.

Is there any way that I can fix this issue- and make the tumblr theme adjust to different screens so that images will not overlap? Thank you so much for reading, and for your time!

This is the code that I am using for my images:

<img style=”position: fixed; left: 0; bottom: 0;” src=”imageurl”>

I can paste any other codes necessary, if it will help find a solution. Thank you!

edit: Here is the entirety of the code (erased a previous link in order to add this one- as a new user, I'm only able to add two. )

pastebin code

Upvotes: 0

Views: 2586

Answers (1)

K K
K K

Reputation: 18099

CSS:

.container {
    width:100%;
    position:relative;
    height:auto;
}
.container img.one {
    max-width:100%;
    width:90%;
}
.container .two {
    position:absolute;
    top:0%;
    left:20%;
    width:26%
}

HTML:

<div class="container">
    <img class="one" src="http://orig07.deviantart.net/0543/f/2015/144/0/4/tryit_by_wdisneyrp_billcipher-d8unbap.png" />
    <img class="two" src="http://orig08.deviantart.net/dfe9/f/2015/145/8/2/office_by_wdisneyrp_billcipher-d8up8z2.png" />
</div>

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/732/ You can adjust width,top,left values according to your design. This is just to show you the direction to proceed.

Tip: Don't use jpg images in this case. Try a png with transparent background.

Upvotes: 2

Related Questions