• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.3 Another Responsive Image Questions

Chimpie

Well-known member
#1
I did some searching around and read a couple of posts, and think my issue will be solved with adding some CSS or Class information, but I haven't figured out what exactly to add.

I'm attempting to place an image in the notices box (this image is just for testing) but adding the 'width 100%' is making the image huge in the desktop browser. This is the code I've used:
Code:
<center><img src="http://www.chimpie.com/files/emtlife/emtlifeadbanner728x90.jpg" style='width:100%;' /></center>
I need the image to be whole in both portrait and landscape mode on phones and tablets, but I want it to be normal size (728 wide) (not enlarged) when viewed on a desktop.

Suggestions?
 

Chimpie

Well-known member
#5
That keeps it from being larger than 728, but now the image is cut off on smaller resolutions (smartphone).

Code:
<center><img src="http://www.chimpie.com/files/emtlife/emtlifeadbanner728x90.jpg" style='max-width:728px'; /></center>
 

Chimpie

Well-known member
#8
Yeah, I found that earlier and still trying to decipher it for my use.

So this is what I came up with and it's not working. I added the following in extra.css:
Code:
.noticeimage
    @media (max-width:@maxResponsiveWideWidth)
        {
            text-align: center; max-width: 100px;
        }
    @media (max-width:@maxResponsiveMediumWidth)
        {
            text-align: center; max-width: 100%;
        }
    @media (max-width:@maxResponsiveNarrowWidth)
        {
            text-align: center; max-width: 100%;
        }
And then for my notice:
Code:
<xen:if is="@enableResponsive">
<p class="noticeimage"><img src="http://www.chimpie.com/files/emtlife/emtlifeadbanner728x90.jpg" style='max-width:728px'; /></p>
</xen:if>
How far off am I?
 

Brogan

XenForo moderator
Staff member
#9
You need to create a class and use that in the media queries and your code.

Instead of style='max-width:728px'; you should have class="myClass" then use myClass in the queries.
 

Chimpie

Well-known member
#13
Brogan, I appreciate your help, I really do, but I'm going to outsource this as well. I'm going on two and a half hours and I still can't figure this out.

When it comes to coding like this, I learn by seeing why something worked, not by trial and error. You are a great resource and all of the xenforo customers are blessed to have you.
 

Brogan

XenForo moderator
Staff member
#14
Code:
.noticeimage
{
    max-width: 728px;
}

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
    {
        .noticeimage
        {
            text-align: center;
            max-width: 100px;
        }
    }

    @media (max-width:@maxResponsiveMediumWidth)
    {
        .noticeimage
        {
            text-align: center;
            max-width: 100%;
        }
    }

    @media (max-width:@maxResponsiveNarrowWidth)
    {
        .noticeimage
        {
            text-align: center;
            max-width: 100%;
        }
    }
</xen:if>
Code:
<p><img src="http://www.chimpie.com/files/emtlife/emtlifeadbanner728x90.jpg" class="noticeimage" /></p>
I have used your code but the medium and narrow do the same thing.
 

Chimpie

Well-known member
#16
Okay... part of the problem solved. Under the WideWidth it was 100px not 100%. That seemed to fix it.

The only issue now is that it's not centering.
 

Chimpie

Well-known member
#18
Soooo, I did this:
Code:
/* *** Notice Image *** */
.noticeimage
{
    width: 100%;
    max-width: 728px;
}
And for the notice text:
Code:
<p align="center"><img src="http://www.chimpie.com/files/emtlife/emtlifeadbanner728x90.jpg" class="noticeimage" /></p>
In my desktop browser the image in center and sized fine.
On my phone in portrait and landscape the image is sized fine, but not centered.

I've tried your CSS code above w/ and w/o the p align center and on my phone it still isn't centered.