Text and Image Alignment

[Dan Ball]

I’m having this problem on multiple pages but have provided the following as an example. Issue is alignment between images and text. I want to have text then an image left aligned with bullet point text (links to pdfs) to the right of the image then a resonable space before repeating down the page.

Only way I can get this to work, sometimes, is to add 7 to 15 blank lines when editing the page. Othertimes, adding blank lines, no matter how many, will not produce the desired results.

I attached the html in a txt file.

Theme = Agency
Page Format = Standard
Page Attribute/Template = Home

Attachments:

1. TheDoorGuys-Doors-Residential.txt

[Bill Robbins]

Hi Dan,

When images are aligned to the left or right, they are “floated” those directions. That means that all the content that is narrow enough or flexible will wrap around it on the opposite site.

What often happens is the image is taller than the text that is intended to go next to it. That cause the text lower on the page to also wrap, even when we don’t want it to.

What you might want to do is insert a “clear” with each of the headings. That will cause the wrapping in the earlier section to stop with the new heading. You could do that by inserting some HTML like this:

<div style="clear:both;"></div>

right before each heading. You might try that and see if it works for you. Let me know how it goes.

Take care,
Bill

[Bill Robbins]

Make sure to copy the code directly from the support site and not the notification email. Also when inserting it, use the “text” tab in the editor and not the “visual” one. There are tabs at the top right of the main content box when editing a page that will let you switch that.

See how that goes.

[Bill Robbins]

If you’d like more fine grained control over the layout than that, I would suggest using a plugin like Page Builder (https://wordpress.org/plugins/siteorigin-panels/). It breaks the content of a page up into rows and columns and you place your content inside each of those with widgets. In addition, each row/column/widget can have it’s own padding and spacing. Ultimately I think that might be the best option.

[Bill Robbins]

Hey Dan,

In Agency, it looks like the widgets have a predefined width. That’s keeping the widgets in the builder from spanning full width. You can override that by adding this to the Custom CSS box that’s at the bottom of the styling tab in the theme options page:

.panel-grid .widget {
	width: 100%;
}

See if that won’t allow those widgets to fill the available space. Let me know if you run into trouble.

Bill

[Author]

Posts