How to have a Responsive Image & Text Side by Side using Classic Editor

  • Hey everyone,

    I’ve been struggling for hours trying to figure out how to display an image side by side with text in WordPress while ensuring it remains responsive. Here’s the issue I’m facing:

    I’m using the WordPress classic editor, and whenever I try to lay out an image next to text using basic HTML and CSS, it either breaks on smaller screens or doesn’t adjust properly to different screen sizes. Sometimes not even working at all.

    I cannot use the block editor which has this feature build in because it is not support on woocommerce products which is what i am doing. I am trying to make better product descriptions adding pictures.

    Here is what i tried:

    <style>
    .textimageblockwrap {
      display: flex;
      flex-wrap: wrap;
    }

    .imagebox_desc, .textbox_desc {
      flex: 1 1 100%;
      box-sizing: border-box;
    }

    .imagebox_desc {
      display: flex;
    }

    .blockimg {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .textbox_desc {
      padding: 1rem;
      display: flex;
      justify-content: center; /* Center horizontally */
      margin: auto; /* Center the box relative to its container */
    }

    /* Media query for larger screens */
    @media (min-width: 600px) {
      .imagebox_desc, .textbox_desc {
        flex: 1;
      }

      .textimageblockwrap {
        align-items: stretch; /* Ensure items are the same height */
      }

      .blockimg {
        height: 100%;
        object-fit: contain; /* Cover the container while preserving aspect ratio */
      }
    }
    </style>
    <div class="textimageblockwrap">
      <div class="imagebox_desc">
        <img class="blockimg" src="https://www.canor-audio.com/thumbs/460x340-drop-90/42-3985-feedback.jpg" style="max-height: 350px;"/>
      </div>

      <div class="textbox_desc">
        <div>
          <h2>Feedback vs Zero feedback</h2>
          <p>Canor Virtus M1 enables instant switching between the connection with the feedback or with zero global feedback. This has an influence on the overall performance of the power amplifier which results in a different listening experience.</p>
        </div>
      </div>
    </div>

    <div class="textimageblockwrap">
      

      <div class="textbox_desc">
        <div>
          <h2>Feedback vs Zero feedback</h2>
          <p>Canor Virtus M1 enables instant switching between the connection with the feedback or with zero global feedback. This has an influence on the overall performance of the power amplifier which results in a different listening experience.</p>
        </div>
      </div>
      <div class="imagebox_desc">
        <img class="blockimg" src="https://www.canor-audio.com/thumbs/460x340-drop-90/42-3985-feedback.jpg" style="max-height: 350px;"/>
      </div>
    </div>

    This code in my case just results in this which is not what i want:

    When i run the code on an HTML online editor i get the desired results but every solution i find out and develop on HTML doesn’t seem to translate well at all in wordpress. This is the desired result:

    I really cant believe that this turned out to be so complex and hard to make… Any help appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)

  • The WordPress Block Editor will make this super easy, as the Media & Text Block does exactly what you want here, and that too with just a few clicks and no fiddling with HTML and CSS.

    I cannot use the block editor which has this feature build in because it is not support on woocommerce products which is what i am doing.

    The folks over at the WooCommerce plugin support forum may be able to help you with this if you can detail exactly what issue you have with the Block Editor + WooCommerce products. If you can get your WooCommerce site working with the Block Editor, it will likely make future WordPress maintenance and updates much easier, as the Block Editor is the default way of doing things now.

    Thread Starter kuhakuneko

    (@kuhakuneko)

    The WordPress Block Editor will make this super easy, as the Media & Text Block does exactly what you want here

    I am aware that the block editor can do this, and that’s why i explicitly mentioned in my post that i want to be able to do this on the classic editor for various reasons.

    The Block Editor is not supported by woocommerce out of the box as it seems and you can only enable it through custom scripts or plugins. So i think this is not an optimal solution to my problem. Plus most of my products are made using the classic editor.

    The folks over at the WooCommerce plugin support forum may be able to help you with this if you can detail exactly what issue you have with the Block Editor + WooCommerce products.

    I did ask over at the woocommerce forum and they provided me with a script to enable the block editor for product pages but as i said, this is not optimal and i don’t know how good the results will be regardless. They also informed me that the particular forum is meant for general support with the core functionality of WooCommerce itself, not for developing questions.

    I think that aligning an image side by side with some text and have them be responsive shouldn’t be that hard and i already implemented it in a simple HTML website but in my wordpress website this code doesn’t seem to translate well. I wont mark this resolved yet since maybe someone else has a suggestion too.

    I see. Thank you for clarifying. The issue could be the <style></style> tags not being picked up correctly when pasted into the editor. You can try adding the CSS to your site via your theme’s Custom CSS screen in the Customizer. If your theme doesn’t have a Custom CSS option, you can try using the Simple Custom CSS and JS plugin.

    I used the said plugin and added this Custom CSS snippet and activated it on the site:

    .textimageblockwrap {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }

    .textimageblockwrap > div {
      flex: 1 1 50%;
      padding: 1rem;
      box-sizing: border-box;
    }

    .img-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .img-container img {
      max-width: 100%;
      height: auto;
      max-height: 350px;
    }

    I then added the following HTML in the editor:

    <div class="textimageblockwrap">
    <div>
    <h2>Feedback vs Zero feedback</h2>
    Canor Virtus M1 enables instant switching between the connection with the feedback or with zero global feedback. This has an influence on the overall performance of the power amplifier which results in a different listening experience.

    </div>
    <div class="img-container"><img src="https://www.canor-audio.com/thumbs/460x340-drop-90/42-3985-feedback.jpg" alt="Feedback vs Zero feedback" /></div>
    </div>
    <div class="textimageblockwrap">
    <div class="img-container"><img src="https://www.canor-audio.com/thumbs/460x340-drop-90/42-3985-feedback.jpg" alt="Feedback vs Zero feedback" /></div>
    <div>
    <h2>Feedback vs Zero feedback</h2>
    Canor Virtus M1 enables instant switching between the connection with the feedback or with zero global feedback. This has an influence on the overall performance of the power amplifier which results in a different listening experience.

    </div>
    </div>

    This seemed to work locally for me (see screenshot): https://d.pr/i/XwLvNy

    If you’d rather not add separate Custom CSS to your site, you can also define the styles inline, though this may become cumbersome if you ever want to change the styles across all your products:

    <div style="display: flex; flex-wrap: wrap; margin-bottom: 20px;">
      <div style="flex: 1 1 50%; padding: 1rem; box-sizing: border-box;">
        <h2>Feedback vs Zero feedback</h2>
        <p>Canor Virtus M1 enables instant switching between the connection with the feedback or with zero global feedback. This has an influence on the overall performance of the power amplifier which results in a different listening experience.</p>
      </div>
      <div style="flex: 1 1 50%; padding: 1rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center;">
        <img src="https://www.canor-audio.com/thumbs/460x340-drop-90/42-3985-feedback.jpg" alt="Feedback vs Zero feedback" style="max-width: 100%; height: auto; max-height: 350px;">
      </div>
    </div>

    <div style="display: flex; flex-wrap: wrap; margin-bottom: 20px;">
      <div style="flex: 1 1 50%; padding: 1rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center;">
        <img src="https://www.canor-audio.com/thumbs/460x340-drop-90/42-3985-feedback.jpg" alt="Feedback vs Zero feedback" style="max-width: 100%; height: auto; max-height: 350px;">
      </div>
      <div style="flex: 1 1 50%; padding: 1rem; box-sizing: border-box;">
        <h2>Feedback vs Zero feedback</h2>
        <p>Canor Virtus M1 enables instant switching between the connection with the feedback or with zero global feedback. This has an influence on the overall performance of the power amplifier which results in a different listening experience.</p>
      </div>
    </div>

    Hopefully this should give you a starting point to work from!

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Tags