[Support request] Image Alignment Issues

[Linda]

Hi again,

I know I’ve been in here far too often with image issues. After days on the issue, I am just hoping for some guidance! 🙂

A bit lengthy, sorry, but want you to have the facts:

1. 3 Columns with Images, Text and Lists
Being unable to align headings/text/lists/images nicely (despite lots of GP support!), I tried the SiteOrigin pro plugin Site Layout. In order to align text/images, we tried adding CSS (though not ideal, as their support said). It looked okay on desktop (see URL), but not on phones and tablets, either … too spread out. Third image is sometimes stretched there; sometimes, okay.

2. Media Text Block with 1 image (check mark) and title/list to right
Could not get the blasted image centered in media block. Tried workaround by creating new image with a transparent vertical column on the left. Looked great on desktop/tablet, but image isn’t centered on phone (it is, but wide left “margin” doesn’t make it appear so). 2 column layout leaves heading/list too far to right of image.

I am out of ideas. Is there anything else I can try? Is there documentation to help that I haven’t managed to locate yet?

We are trying to get this home page looking good before applying more design, but it seems it looks worse and worse with each of my attempts to fix. Not complaining, just frustrated and puzzled about where to turn!

Thanks for any assistance or redirection. If David is reading this, apologies for being here again!

Linda

[Tom]

Hi Linda,

I’m not too sure what you’re trying to do/which area of the page I should be looking at. Are you having trouble with the green check mark under “How it works”? If so, what about it are you trying to tweak?

Let me know 🙂

[Linda]

Hi Tom,

Thanks for replying and apologies for not being clear.

Are you having trouble with the green check mark under “How it works”?
Yes, that’s one issue. Is it possible to centre it in responsive way? My tweak of creating new image with transparent box on left doesn’t work on mobile.

The second issue is the 3 column layout under “selling is simple” placeholder. But we can hold off on that one for now.

Does this help?

Linda

[Tom]

Are you trying to center it horizontally? Any chance you can alter the image so it doesn’t have the extra spacing on the left?

[Linda]

Yes, Tom, centering it horizontally was what I was trying to do with the extra spacing. I’ve now uploaded the original, no spacing image so you can see where it lines up without it.

Linda

[Tom]

It looks like your media block is set to “Align wide”. Can you disable that? It may also help to add a custom class to the blog in the “Advanced” area of your block settings. Then we can alter that specific block with CSS without affecting other similar blocks.

[Linda]

Hi Tom,

Thanks so much for responding on your weekend!

I disabled the wide width and it already looks better. 🙂 Can you please take a look and see if you think it still needs centering/moving slightly to the right?

If so, let’s try your CSS solution; if not, we’ll leave it as is.

Again, my appreciation for all your help … and patience!

Linda

[Tom]

That looks much better. It aligns with the text above it nicely now.

We can move it more to the right if you’d like, we’d just need that custom class added to the block first 🙂

[Linda]

Thanks a bunch for taking a look, Tom. I think it looks pretty good, too. Once I can get the page styled, I’ll see how it fits in and let you know if we need to add some CSS.

Update:
As for my earlier 3 columns issue, back to Gutenberg column block and working on substituting same-size icons for the images I created. That seems to be making the text alignment work. Getting my images to be the same size was proving overly difficult for me!

Getting there! 🙂

Linda

[Tom]

Awesome! Let us know if you need anything else 🙂

[Author]

Posts