[Support request] Image Alignment Issues

Home Forums Support Image Alignment Issues

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #928630
    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

    #928939
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #929461
    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

    #930038
    Tom
    Lead Developer
    Lead Developer

    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?

    #930339
    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

    #930680
    Tom
    Lead Developer
    Lead Developer

    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.

    #930781
    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

    #930915
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #931567
    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

    #931690
    Tom
    Lead Developer
    Lead Developer

    Awesome! Let us know if you need anything else πŸ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.