[Support request] Split & Float text around sized images

Home Forums Support Split & Float text around sized images

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1210101
    Krank

    Hello,
    I’m building a webpage using GP premium with the Catalyst prebuilt page. I’m trying to set images in the body of my text while setting them to float at 30% or 50% width for tablet and desktop, and 100% for mobile (stack on mobile- this is key). I’ve been able to get this to work occasionally with the included LGC, but it looks as this isn’t supported anymore, so is inconsistent. I can’t seem to figure out how to make it work cleanly with the column blocks; the text wrap doesn’t work and leaves white space or other problems. I need the text to flow around the pictures regardless of screen size while maintaining readability; otherwise the text/media block would work. Have tried several different block plugins to try to resolve.

    I would appreciate some insight if you can. I’m sure there’s a clean way to make this happen that I’m not aware of.

    Chris

    #1210193
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Have you tried just inlining the image and setting the alignment? GP should make your aligned images 100% on mobile by default: https://wptavern.com/how-to-add-an-image-to-a-paragraph-block-in-gutenberg

    #1210200
    Krank

    Hey Tom,
    This was my initial approach, and while reasonable on desktop with the right size image, it doesn’t perform on mobile as desired. The images end up with a sliver of text beside them on mobile. Using grid columns worked well but wasn’t stable.

    Perhaps I’m missing something?

    #1210667
    David
    Staff
    Customer Support

    Hi there,

    if you’re using the the floated images then try this CSS to force the image to occupy 50% of the screen on smaller devices:

    @media (max-width: 420px) {
        .wp-block-image .alignleft, .wp-block-image .alignright {
            width: 50%;
        }
    }
    #1210857
    Krank

    Thanks David,
    I’d been bumbling around with CSS but I’m not yet familiar with the syntax and calls yet. That helps a lot. I used this for now, using your piece as a start:


    @media
    (max-width: 420px) {
    .wp-block-image .alignleft, .wp-block-image .alignright {
    width: 100%;
    }
    }

    @media
    (min-width: 421px) and (max-width: 1023px) {
    .wp-block-image .alignleft, .wp-block-image .alignright {
    width: 50%;
    }
    }

    @media
    (min-width: 1024px) {
    .wp-block-image .alignleft, .wp-block-image .alignright {
    width: 30%;
    }
    }

    Thanks again

    #1210868
    David
    Staff
    Customer Support

    Glad to be of help 🙂

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