XF 2.2 Pictures framed by text

[Deleted member 184953]

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.

 

[Deleted member 184953]

Hello, anybody ?

 

[Paul B]

Can you link to the test thread on this site?

 

[Deleted member 184953]

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

 

[Paul B]

The short answer is don't float images.

 

[Deleted member 184953]

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

 

[Paul B]

Glad I could help.

 

[Deleted member 184953]

 

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

 

[Deleted member 184953]

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 ?

 

[Deleted member 184953]

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.

 

[Deleted member 184953]

Tried this and it works perfectly.

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