Text and Image Alignment

Support Area Forums Agency Text and Image Alignment

This topic contains 4 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
URL to the page in question: http://tdg.etclinuxtest.com/doors/residential/
  • Author
    Posts
  • #37047

    Dan Ball
    Participant

    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

    • This topic was modified 1 year, 1 month ago by  Dan Ball.
    #37049

    Bill Robbins
    Keymaster

    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

    #37051

    Bill Robbins
    Keymaster

    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.

    #37052

    Bill Robbins
    Keymaster

    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.

    #37117

    Bill Robbins
    Keymaster

    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

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Text and Image Alignment’ is closed to new replies.