Layout Builder in Footer

Hi Lawrie

Could the last row perhaps have just one column? Insert an Editor widget into the single column and set the image to center alignment. The SiteOrigin Image widget would work too. Or the Custom HTML widget could be updated to center align the image.

For the first three widgets, ideally, remove the inline styles used to handle the text alignment. Edit the widget, open the Attributes section on the right, try adding the CSS Declaration there. That’ll allow you to use the Mobile CSS Declarations field to add a new alignment for mobile.

Hi Andrew
I think the problem is that it is not just a simple image. It is a snippit which produces an image on the site which can be updated remotely (if that makes sense).

Thanks. Adding display: block; margin: 0 auto; to the inline styles of the containing div for the image will center it.

Perfect for the desktop Andrew. Thank you.
But the mobile version is still not right.

Glad to hear you’re making progress.

For the first three widgets, ideally, remove the inline styles used to handle the text alignment. Edit the widget, open the Attributes section on the right, try adding the CSS Declaration there. That’ll allow you to use the Mobile CSS Declarations field to add a new alignment for mobile.

Thanks Andrew.
Sort of getting there.
The image is now central in mobile view but some of the text is askew.
Can probably live with it even if not quite right.

The alignment is inline. If you edit the widget, check the Text tab. The alignment ideally, needs to be at the widget level and not at the paragraph level (inline) so you can adjust it for mobile.

<p style="text-align: right;">

change to

<p>

Then use the widget Attributes section.

This can also be done using Custom CSS and media queries.

I tried that Andrew without luck so have set the style back.
With no alignment I tried
.center {
text-align: center;
}
and
p {
text-align: center;
}
but neither worked.
Thanks for your help anyway. Much appreciated as always.

Hi thanks for the feedback. If you were using the CSS declarations field, the CSS declarations field should be used with a property and a value:

text-align: center

text-align is the property and center is the value, together they make up a CSS declaration. The field accepts one per line and the closing ; isn’t required.

https://siteorigin.com/custom-css-guide-page-builder-row-cell-widget-attributes/

Sent from mobile.

• This reply was modified 4 years, 2 months ago by Andrew Misplon. Reason: Corrected mistake

Brilliant.
Thanks for your help and patience Andrew.
Kind regards.

Super, glad to hear you’re making progress! Thanks for the update.