XF 2.2 Pictures framed by text

[Old Nick]

Is there a way to prevent this ?
In mobile view can images be prevented from being framed? I don't know the exact term for this feature, sorry.
Thank you.

 

[Old Nick]

Hello, anybody ?

 

[Paul B]

Can you link to the test thread on this site?

 

[Old Nick]

Yep ! https://xenforo.com/community/threads/article-thread-and-forum-updates-and-improvements.183723/

 

[Paul B]

The short answer is don't float images.

 

[Old Nick]

I think I'd prefer the long answer... the short answer sucks.

 

[Paul B]

Glad I could help.

 

[Old Nick]

 

[Paul B]

The images have a fixed width and are aligned left.

The text therefore wraps around them.

As the viewport width is reduced, the image retains its fixed width and the available space for the text reduces until there is no space left other than for the image, which then reduces in size with the available width of the div.

There is nothing which can be done other than to not align the image, or not provide a width for it, or set the style as a fixed width and not be responsive.
Or all three.
Or a combination thereof.

 

[beerForo]

Depends on your screen size too. Looks good to me in portrait until it hits the Preview block. In landscape that block looks fine but others look messed up. It's fluid and going to happen.

 

[Old Nick]

Thanks.
I was wondering if it was not possible to globally remove the floating under a certain screen width with a little CSS code in extra.less ?

 

[Old Nick]

I found those class : bbImageAligned--left and bbImageAligned--right
Can we play with them in extra.less template ?

@media (max-width: 650px) {
    .bbImageAligned--right, .bbImageAligned--left {
        something: here;
    }
}

 

[Paul B]

Try using media queries and setting different max-widths.

 

[Old Nick]

Tried this and it works perfectly.

@media (max-width: 900px) {
    .bbImageAligned--right, .bbImageAligned--left {
        min-width: 100%;
    }
}