XF 1.2 Resizing signatures in responsive

[Martok]

In 1.1.5 I've been using this to control the size of images in signatures.

.message .signature .bbCodeImage {
max-height: 125px !important;
max-width: 550px !important;
}

This has worked just fine in resizing sig images that are too big on the forums.

In 1.2, this is now causing problems because with smaller screens, the sig image will remain at 550 x 125, making it stick out beyond the forum post box size.

The problem seems to be with max-width: 550px !important; as when this is removed, the sig image resizes on smaller screens as expected. However without this it means that members can use images which are wider than 550px.

I'd be grateful for any help on how to get this working correctly with responsive.

 

[Paul B]

You will need to use media queries for the respective widths.

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth) {
        .message .signature .bbCodeImage {
        max-height: 125px !important;
        max-width: 550px !important;
        }
    }

    @media (max-width:@maxResponsiveMediumWidth) {
        .message .signature .bbCodeImage {
        max-height: 80px !important;
        max-width: 4000px !important;
        }
    }

    @media (max-width:@maxResponsiveNarrowWidth) {
        .message .signature .bbCodeImage {
        max-height: 50px !important;
        max-width: 200px !important;
        }
    }
</xen:if>

You can add other queries as required, use custom widths, etc.

 

[Martok]

Thanks @Brogan, that's been really helpful.

Now I noticed that before I had anything in EXTRA.css for signatures that images in signatures would nicely resize when decreasing the size of the browser and responsive kicked in. It was only when putting in something into EXTRA.css to restrict large images that the problems occurred.

I therefore took what you suggested and altered it to this:

<xen:if is="@enableResponsive">
    @media (min-width:925px) {
        .message .signature .bbCodeImage {
        max-height: 125px !important;
        max-width: 550px !important;
        }
    }
</xen:if>

What this does is for any screen width over 925px (something which I judged by eye) it resizes larger sig images to within the specified dimensions. Below this, sig images automatically resize themselves due to the width of the post container.

I'm just checking to see if what I have done is correct (well it seems to work) of if I've missed anything obvious. Also if there's a better way to specify the min-width than just doing it by eye.

 

[Paul B]

That's correct.
The condition means it will only apply to responsive styles.
The media query means it will only apply at widths of 925px and above.

The min-width needs to be based on the available width for the signature area, which will be the overall page width less the avatar block, margins, padding, etc.
You can do it by eye or calculate it if you know all of those settings.

I am currently writing a resource which will incorporate all of the issues related to responsive design.

 

[Martok]

After more playing around with signature images and responsive, I've now got code that weeks to work for my needs. On my site, signature images are a maximum of 550 x 125 px. So that code I have is:

<xen:comment>Limiting image sizes in signatures</xen:comment>
<xen:if is="@enableResponsive">
    @media (min-width:700px) {
        .message .signature .bbCodeImage {
        max-height: 125px !important;
        max-width: 550px !important;
        }
    }
    @media (min-width:481px) {
        .message .signature .bbCodeImage {
        max-height: 125px !important;
        }
    }
</xen:if>

For anyone interested in how I came up with the above, here is the explanation:
Above 700px signature images are restricted in both width and height. 700px is the size for my forum setup where a 550px image just fits in the signature container.
From 481-700px the max-width was dropped as images with 550px width remained at this due to !important and stick out of the signature container. Dropping this means signature images then scale to fit the signature container. The max-width is left in to keep the restriction on height of sigs still.
At 480px the Max Responsive Width (Narrow) kicks in and signatures are hidden, so no need for any code.


My only question now @Brogan is should I be using .message .signature .bbCodeImage or .signature.messageText img? You mentioned using the latter in this post. I've tried both and they both seem to work, unless I'm missing something?

 

[tommydamic68]

After more playing around with signature images and responsive, I've now got code that weeks to work for my needs. On my site, signature images are a maximum of 550 x 125 px. So that code I have is:

<xen:comment>Limiting image sizes in signatures</xen:comment>
<xen:if is="@enableResponsive">
    @media (min-width:700px) {
        .message .signature .bbCodeImage {
        max-height: 125px !important;
        max-width: 550px !important;
        }
    }
    @media (min-width:481px) {
        .message .signature .bbCodeImage {
        max-height: 125px !important;
        }
    }
</xen:if>

For anyone interested in how I came up with the above, here is the explanation:
Above 700px signature images are restricted in both width and height. 700px is the size for my forum setup where a 550px image just fits in the signature container.
From 481-700px the max-width was dropped as images with 550px width remained at this due to !important and stick out of the signature container. Dropping this means signature images then scale to fit the signature container. The max-width is left in to keep the restriction on height of sigs still.
At 480px the Max Responsive Width (Narrow) kicks in and signatures are hidden, so no need for any code.


My only question now @Brogan is should I be using .message .signature .bbCodeImage or .signature.messageText img? You mentioned using the latter in this post. I've tried both and they both seem to work, unless I'm missing something?

What template are you placing this code?

Thanks,

 

[Martok]

The code goes in EXTRA.css

I've amended the code now to this

<xen:comment>Limiting image sizes in signatures</xen:comment>
<xen:if is="@enableResponsive">
    @media (min-width:700px) {
        .signature.messageText img {
        max-height: 125px !important;
        max-width: 550px !important;
        }
    }
    @media (min-width:481px) {
        .signature.messageText img {
        max-height: 125px !important;
        }
    }
</xen:if>

 

[taylor_smith]

Works perfect. Thanks, @Martok.

 

[Zynektic]

<xen:if is="@enableResponsive">
    @media (min-width:700px) {
        .signature.messageText img {
        max-height: 200px !important;
        max-width: 550px !important;
        }
    }
    @media (min-width:481px) {
        .signature.messageText img {
        max-height: 200px !important;
        }
    }
</xen:if>

Based on previous help I am using this to control signatures however, on my netbook which uses 1024 x 600 in conversations the signature is huge. Is there any way to fix this also?

Thanks!

 

[Martok]

You'll have to adjust the various widths and heights to suit your site and theme and your site's specifications for signatures. You may need to do this by trial and error, testing out settings and adjusting your browser size on a PC to mimic the browser sizes on other devices. I've had to adjust the sizes for my own site since changing themes.