Archived topic
Split & Float text around sized images
5 replies · Started by Krank on March 25, 2020
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
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
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?
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%;
}
}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
Glad to be of help :)
