XF 2.3 Left-Floated Image Squishes Text to the Right of it on a Phone Screen

[tomwood]

I have a 246x280 image on a Xenforo 'PAGE' node that is floated left so the text can wrap around it and fill the desktop space to the right of it. But, on a phone, it squishes the text into a narrow one-word-wide column.



I could un-float the image to solve the phone display issue by letting the image center above the text, but then there will be a big blank space to the right of it on desktop.

Gemini is suggesting this:

The Solution: Paste This HTML/CSS Into Your Page Node

Open your XenForo Admin Control Panel, go to your Page node, and replace the top layout area of your HTML template with this code snippet:
html
<div class="book-container">
    <div class="book-cover-wrapper">
        <img src="path/to/your/image.webp" class="book-cover-img" alt="Clarity or Delusion Book Cover" />
    </div>
    <div class="book-description">
        <!-- Place your Title, Metadata, Description, and Buy Buttons here -->
        <h2>Clarity or Delusion</h2>
        <h3>A Hopepunk Reveals the Deceivers</h3>
        <p>Your description text will flow naturally here. On desktop, it stays cleanly to the right of the cover image. On a mobile phone, it breaks automatically beneath the image and takes up the full width of the phone screen, eliminating narrow squished columns.</p>
    </div>
</div>

<style>
/* Modern Flexbox Responsive Grid */
.book-container {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.book-cover-wrapper {
    flex: 0 0 300px; /* Forces your cover to stay exactly 300px wide on desktop */
}

.book-cover-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.book-description {
    flex: 1; /* Allows text to naturally absorb all remaining desktop screen space */
}

/* Mobile Media Query Breakpoint */
@media (max-width: 650px) {
    .book-container {
        flex-direction: column; /* Stacks the content vertically on mobile phones */
        align-items: center;    /* Centers the book cover on mobile views */
        gap: 20px;
    }
   
    .book-cover-wrapper {
        flex: 0 1 80%; /* Allows the book cover to responsibly scale down on tiny phones */
        max-width: 280px;
    }
}
</style>
Use code with caution.

Why This Fixes Both Layout Issues Automatically

1. Desktop View (flex-direction: row): The flex rows naturally sit side-by-side. The left column locks your book cover cleanly at a solid desktop size (e.g., 300px), while the description dynamically stretches across the remaining blank space to prevent wide desktop gaps.
2. Mobile View (flex-direction: column): The media query instantly triggers when the reader's device screen width drops below 650px. It breaks the side-by-side float rules, placing the cover block safely in the center and allowing the text underneath to breathe horizontally across the viewport.

Is there a native Xenforo solution?

 

[Mr Lucky]

Try code that only targets specific browser width. I'm not able to check at the moment but try this. Probably good to include right floating also. Trial and error to find the ideal max width.

@media (max-width: 600px)

{
    .bbImageAligned--left,.bbImageAligned--right
    {
        float:none!important;
    }
}

 

[tomwood]

Try code that only targets specific browser width. I'm not able to check at the moment but try this. Probably good to include right floating also. Trial and error to find the ideal max width.

@media (max-width: 600px)

{
    .bbImageAligned--left,.bbImageAligned--right
    {
        float:none!important;
    }
}

Thank you, but that has no effect.

This is the code that inserts the image:

<img src="https://hopepunks.com/styles/default/hopepunks/246x280-tricksters-logo-clarity-or-delusion-a-hopepunk-reveals-the-deceivers.png" style="float: left; margin: 0 25px 15px 0;" alt="Book cover for Clarity or Delusion: A Hopepunk Reveals the Deceivers by Tom Wood" width="246" height="280" />

So, there is no BBcode to reference. And remember, this node is a Xenforo Page, so the styling choices are hand coded and/or handled in extra.less.

Never mind, Gemini came up with a much cleaner solution:

<style>
/* 1. Desktop Styles (Default) */
.responsive-book-cover {
    float: left;
    margin: 0 25px 15px 0;
    width: 246px;
    height: auto;
}

/* 2. Mobile Styles (Applies to screens 480px wide or smaller) */
@media (max-width: 480px) {
    .responsive-book-cover {
        float: none;          /* Stops text wrapping */
        display: block;       /* Forces the image onto its own line */
        margin: 0 auto 15px;  /* Centers the image and adds bottom spacing */
        max-width: 100%;      /* Ensures it doesn't overflow small screens */
    }
}
</style>

<img src="https://hopepunks.com/styles/default/hopepunks/246x280-tricksters-logo-clarity-or-delusion-a-hopepunk-reveals-the-deceivers.png"
     class="responsive-book-cover"
     alt="Book cover for Clarity or Delusion: A Hopepunk Reveals the Deceivers by Tom Wood" />

Gemini also asked: Does XenForo's built-in responsive helper classes (like u-floatLeft) work inside your setup?

I have no idea what that means!