XF 1.3 Another Responsive Image Questions

[Chimpie]

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:

<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?

 

[Paul B]

Try max-width: 728px.

 

[Chimpie]

Replacing 'width:100%' or adding that to the above code?

 

[Paul B]

Replace width:100% with max-width: 728px.

 

[Chimpie]

That keeps it from being larger than 728, but now the image is cut off on smaller resolutions (smartphone).

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

 

[Chimpie]

The only thing I can think of doing is a bunch of 'ifs' to make it work.

 

[Paul B]

Well the typical way to deal with it is by using media queries: https://xenforo.com/community/resources/responsive-design.2193/

 

[Chimpie]

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:

.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:

<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?

 

[Paul B]

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]

Yeeeeaaahhh... that's what I thought I did. #ugh

 

[Chimpie]

then use myClass in the queries

Can you elaborate on this part?

 

[Paul B]

Copy Example 3 in the resource: https://xenforo.com/community/resources/responsive-design.2193/

You currently don't have a class in the media queries.

 

[Chimpie]

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.

 

[Paul B]

.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>

<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]

Thanks for continuing to help. On portrait it looks fine...


.. but landscape ad does this..

 

[Chimpie]

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.

 

[Paul B]

I'm on my tablet so I can't check but you may need to add the center code to the parent div/p.

 

[Chimpie]

Soooo, I did this:

/* *** Notice Image *** */
.noticeimage
{
    width: 100%;
    max-width: 728px;
}

And for the notice text:

<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.