[Support request] Align Images with Text

[Linda]

Hi guys,

I’ve gone through the previous topics that seemed relevant, but can’t find an exact fit for my alignment issue.

We want 2 images on our home page to be clickable and aligned with their text on the right. We can align them using Media & Text block, but then the images aren’t clickable.

Can you tell me how we can align the image in the How It Works section so it is beside the bullets and not above them? Is there some CSS I could add? Or …?

I’m trying to get the bullet list heading (The Challenge process…) above the bullets, and have the bullets indented below the heading with the image to the left.

Thanks for your help,

Linda

P.S. URL is to our subdomain used to create new site

[David]

Hi there,

have you tried using the Columns Block? Image in the first column and your heading and bullet points in the second.. This will stop the text from wrapping around the image.

For smaller screens the two columns will stack but if thats not required we can give a little CSS to the columns to stop that.

[Linda]

Hi David,

No, I hadn’t tried Columns, just the Media & Text block. Will try it and let you know.

Question: when you mentioned smaller screens, did you mean phones or smaller desktop screens and/or tablets? I’m happy with stacking for phones. I’ll check this out in Customizer, see how things look and include that, too, when I post back.

Thanks for your suggestion,

Linda

[Leo]

Smaller screens generally mean mobile.

However you can usually tweak it to your liking using the media query:
https://docs.generatepress.com/article/responsive-display/

[Linda]

Thanks, Leo. Kind of what I suspected, but better to know for sure!

Will check out your link because I suspect I’ll need such information as we get to fine tuning our new site … and making sure it looks as good on mobile as it does on my monitor!

Linda

[Leo]

Let us know if you run into any issues 🙂

[Linda]

Hi guys,

Well, phooey. Played around with the column block, but without success. The image is still aligned horizontally with the title instead of the list.

Would like to include a screenshot of my 2 attempts, but can’t see how to do that. If it’s not too much trouble, you could see what I’m struggling with on the draft home page: It’s “How Does It Work” section. Column attempt on top, clickable image + text below. Omitted Media & Text since image couldn’t be made clickable with it.

AND is this a theme issue at all or should I be trying to find answers on WordPress? I don’t want to take advantage of your super support for non GP questions!

Apparently, a vertical image alignment feature is in the works, but not available yet. If it arrives this week, all would be solved! 🙂

Thanks again for trying to help,

Linda

[David]

Aah i see the issue now 🙂 It’s a Gutenberg issue – they still have plenty of work to make this more pagebuilder like… the new columns do have vertical alignment controls, which works well in most cases apart from images.

So how about we do this, using your original method ( we’ll leave columns alone for now ). Select the image block in the Settings Sidebar > Advanced –> Additional CSS field add: push-down

Then add this CSS:

.push-down  {
    margin-top: 2em;
}

This should help align the image with the text. You can adjust the margin top to suit. Let me know if that works or if i have completely mis read this 🙂

[Linda]

I totally agree with Gutenberg being not quite there yet! Sigh.

I appreciate you taking a look and your solution sounds workable. I understand the CSS you used and know I can play with the 2em until it’s correct.

Okay, I know where to copy the Additional CSS. Not sure where or if to place this: “Additional CSS field add: push-down”. I have 2 options: Link CSS Class and Link Rel. Or do I just paste the CSS into Additional CSS and ignore your first push-down? Sorry, I know this is awfully basic!

Thanks for extra direction!

Linda

[David]

Make sure you have the right hand settings sidebar open in the Gutenberg editor.
Select the image block. In the Settings Sidebar > Block Tab at the very bottom should be an Advanced toggle you will find the Additional CSS class field there 🙂

[Linda]

Got it. Thanks, David. Wasn’t sure if “push-down” had to be added in a second place. What you’re saying is, no, just paste the CSS as you gave me into Additional CSS slot.

I’ll try that and let you know how it goes.

Many thanks for your patience and clear instructions!!

Linda

[David]

Nope 🙂

So in the editor you just add the push-down class in the Settings > Advanced > Additional CSS Class(es) field.
And the CSS goes in the Customizer > Additional CSS

[Linda]

Aha! I did have it wrong. Now I do get it, David. Thank you. I was trying to put everything into the Block column. It will likely work a lot better now! 😉

Excited to try … will let you know.

Linda

[David]

You’re welcome

[Linda]

Hi David,

I’m editing this to let you know to hold off until I try the3 column approach! Hope to save you some time! 🙂

Well, good news: your code worked perfectly once I had it in the correct places. Not so good news: I can’t get the list intro (The Challenge sales process …) to line up nicely above and to left of list unless I use Columns.

UPDATE: found it! It’s in the Settings WHEN Blocks is there. Trouble is, once the columns have been created, I can’t get Blocks to show there; just Paragraph or Image. Grrr. I’m going to try to recreate the 2 columns in 3 to see how it turns out.
Pre update – With columns everything lined up well … except I can’t manage to change the column block from 2 to 3 columns. I know I’d done 3 before, but can’t remember or figure out how I did it!!! It seemed to be a setting I found somewhere that allowed me to select the number of columns.

With 3 even width columns, and the third one empty, the list moves over beside the image, aligned as desired thanks to your CSS.

The 2 setups are one above the other on the Home page so you can take a look when you have time.

Any ideas? I apologize for taking up so much of your time on this one tiny issue.

Linda

[Author]

Posts