Adding an extra image in the forumtitle section?

[Grammy]

Y'all are way too quiet over here today.  I've come to pester you!   

I'm playing with my test site, 2.1RC3 (Github download):

http://sitedabble.com/kick

See that little girl, over to the right?  (I'll attach a screenshot just to make sure you see how I'm seeing her on my browser.)

Right now, all I've done is mess with the Index.template.php so this:

Code Select Expand

echo '
<div id="header">
<h1 class="forumtitle">
<a id="top" href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name_html_safe'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name_html_safe'] . '">', '</a><img src="http://sitedabble.com/kick/Themes/default/images/kicker.png" style="width: 178px; height: 200px; position: absolute; margin-right: 30px; padding-bottom: 15px;" />
</h1>';

Which is fine, I like how she landed, half above the wrapper, half below (even without a z-index). When I grab the corner of my browser and shrink it, she seems to move inward with everything else.  But of course, when I look at it on my iPhone she hops down and lands somewhere else. (2nd screenshot)  Is there any help for that or would I need to do some sort of media query to get her to behave?

Or if I'm going to try this, should I position the image within the wrapper, instead of the forumtitle div?  (Bearing in mind that, according to the "kickerShot.png" screenshot, that is how I'd ultimately like the image to be positioned.  (I've quit calling it "her", I'm probably weirding you all out.)    

[Kindred]

Interesting... on my Samsung I see this

[Grammy]

Interesting... on my Samsung I see this

Wow...  if it would look like that on my iPhone 11, I'd leave it alone, that would be fine!  Here it is in landscape (screenshot).

That's also okay.  Well, I know what I've done is all "duct-tape" (my m.o.) but other than having the image scale with the device, I'm not sure how to sort it.  (Media queries hate me.   

Edit to add:  I did just try max-width: 100% but that didn't change anything.

[Kindred]

ok...


1- give the image an ID (e.g. id="kickergirl")
2- Move all that inline css to the actual css

Code Select Expand


#kickergirl {
width: 178px;
height: 200px;
position: absolute;
margin-right: 30px;
padding-bottom: 15px;
}


3- add something like

Code Select Expand


@media only screen and (max-width: 600px) {
    #kickergirl {
        display: none;
    }
}


this will HIDE the image once you reach a 600 screen width or less

[Grammy]

Well....   it moves her both on the desktop and iPhone to within the forumtitle div (so I may not have that cool overlap I had before on the desktop, but at least she's not down in the log in area on the phone).

(screenshots attached).

I'ma get the sledge hammer!   

[Grammy]

Oh, wait.....   no, that did just what you intended!  She's where she's meant to be on the desktop and disappears on the mobile.   (I had to go to my phone settings and purge Safari and reload).

I think that's got it!   

Thanks, again, Kindred!