- This topic has 9 replies, 2 voices, and was last updated 2 years, 1 month ago by Tom.
June 13, 2019 at 9:40 am #928630Linda
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!
LindaJune 13, 2019 at 3:43 pm #928939TomLead DeveloperLead Developer
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 🙂June 14, 2019 at 6:19 am #929461Linda
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?
LindaJune 14, 2019 at 3:52 pm #930038TomLead DeveloperLead 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?June 15, 2019 at 3:54 am #930339Linda
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.
LindaJune 15, 2019 at 9:07 am #930680TomLead DeveloperLead 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.June 15, 2019 at 11:36 am #930781Linda
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!
LindaJune 15, 2019 at 5:29 pm #930915TomLead DeveloperLead 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 🙂June 16, 2019 at 10:49 am #931567Linda
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.
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! 🙂
LindaJune 16, 2019 at 3:47 pm #931690
- You must be logged in to reply to this topic.