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

  • Resolved kuhakuneko

    (@kuhakuneko)


    8 months, 2 weeks ago

    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 (e.g. always staying on top). Sometimes not even working at all.

    I cannot use the block editor which has this feature build in because i think it is not yet supported from woocommerce out of the box, which is what i need this feature for, as I am trying to make better product descriptions by 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 a 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:

    Initially i posted this in the Developing with WordPress Forum but a member told me that someone over here may be able to help me with this.

    I really cant believe that this turned out to be pretty complex and hard to make… Any help is appreciated!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Shameem R. a11n

    (@shameemreza)

    Hi @kuhakuneko

    I cannot use the block editor which has this feature build in because i think it is not yet supported from woocommerce out of the box, which is what i need this feature for, as I am trying to make better product descriptions by adding pictures.

    To enable the block editor for your product description, simply add this custom code snippet to your child theme’s functions: https://gist.github.com/shameemreza/0f1c2baf2f7009ad12733efa34c992e5

    // enable gutenberg for woocommerce
    function activate_gutenberg_product( $can_edit, $post_type ) {
     if ( $post_type == 'product' ) {
            $can_edit = true;
        }
        return $can_edit;
    }
    add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );

    // enable taxonomy fields for woocommerce with gutenberg on
    function enable_taxonomy_rest( $args ) {
        $args['show_in_rest'] = true;
        return $args;
    }
    add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
    add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );

    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 (e.g. always staying on top). Sometimes not even working at all.

    I understand your struggle with responsive image and text placement, especially when working with the Classic Editor. Your code seems to be correct for a standard HTML environment, but WordPress sometimes handles CSS a little differently.

    Additionally, even though the way CSS and layout function can vary depending on the theme., you can modify your CSS like this:

    .textimageblockwrap {
    display: flex;
    flex-direction: column;
    }

    .imagebox_desc, .textbox_desc {
    width: 100%;
    }

    @media (min-width: 600px) {
    .textimageblockwrap {
    flex-direction: row;
    }

    .imagebox_desc, .textbox_desc {
    width: 50%;
    }
    }

    For reference, this particular forum is meant for general support with the core functionality of WooCommerce itself. For development and custom coding questions, it’s best to ask for insight related to those on either the WooCommerce Advanced Facebook group or the WooCommerce Community Slack. Many of our developers hang out there and will be able to offer insights into your question. You can also seek help from the following:

    I wish I could help more, but hopefully, this gets you going in the right direction to get the job done.

    Plugin Support Shameem R. a11n

    (@shameemreza)

    Hi @kuhakuneko

    I’m marking this topic as “resolved” due to recent inactivity. If more assistance is needed, feel free to post back here or open a new topic.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to have a Responsive Image & Text Side by Side using Classic Editor’ is closed to new replies.