Align image with text – GeneratePress

This topic has 17 replies, 5 voices, and was last updated 3 years, 4 months ago by David.

Viewing 15 posts - 1 through 15 (of 18 total)

1 2 →

Author

Posts
November 27, 2022 at 9:51 pm #2438201

Janani

Dear Team

Please refer to the courses section on this website – you can see the ‘Zen program on meditation and mindfulness’. The text is going beyond the image. Is it possible to align the image in such a way, that the image is in the centre of the text, with equal space in the top and bottom of the text with relation to the image? I hope I have been able to explain my requirement clearly, please let me know if I am not clear and I will try to rephrase my question better.

Kind regards

November 27, 2022 at 10:20 pm #2438227

Fernando
Customer Support

Hi Janani,

How are you creating this section?

If it can be done through GenerateBlocks, why not use that instead? You can use a Grid Block to properly position columns. It also has spacing settings on different views so you can style it appropriately. Reference: https://docs.generateblocks.com/article/grid-overview/ This should be the easiest approach.

Let us know what you think.

November 28, 2022 at 9:49 pm #2440332

Janani

Dear Fernando

yes, this seems to be a great option. Unfortunately, I am in the finishing stages of my website, and I dont want to mess up with the codes that my website developer has already given. So, if you can just give me the css code that would help position the image and align it more with the text content, that would greatly help.

But Generate blocks is definitely good and much more light-weight than standard website builders, so I plan to use it in all my new pages that I would creating going forward.

Kind regards
Janani

November 28, 2022 at 9:57 pm #2440337
Fernando
Customer Support
I see. Sorry, but providing custom solutions for features of other plugins is out of our scope of support though.

Here’s a quick fix to get you started however:
```
@media (max-width: 768px) {
    .zen-meditation > * {
        text-align: center;
    }
}
```
November 28, 2022 at 11:03 pm #2440393

Janani

Dear Fernando

Thank you, actually there are no codes relating to other plugins. But since the web page has already been designed with sections, I do not want to now change to other tools as I may not have the capability to handle them at this point in time. Hope you understand.

Unfortunately, the code does not seem to work. All I want is to align the image in the center but in the same left side of the text. After doing this, the text box would still be extending beyond the image, but equally on the top and bottom. Hope I make sense?

Kind regards,

November 28, 2022 at 11:32 pm #2440409

Fernando
Customer Support

We understand, however, we hope you understand that providing support for other plugin’s features, layout and structure isn’t part of our support’s scope.

I’m not sure I understand. Can you share a sketch/screenshot?

This is what I initially understood: https://share.getcloudapp.com/rRu5P8Y0

November 29, 2022 at 3:32 am #2440683

Janani

Sure Fernando, understand your point full welly. Please let me know if I am exceeding my limits by any chance! You people are such a nice and helpful team, so sometimes maybe, I ask a little too much, but you can be sure that I do this only as a last resort, after exhausting all other options available.

On what I expect, please refer to the link provided below. You can see here, that the image continues to remain positioned where it is, but it is now aligned to the center of the text. So, all the text is extending a little beyond the image, there is equal spacing between the top text and bottom text in relation to the image.

Kind regards

November 29, 2022 at 4:32 am #2440769
David
Staff
Customer Support
Hi there,

try adding this CSS:
```
@media(min-width: 767px) {
    .zen-meditation {
        display: flex;
        align-items: center;
    }
}
```
November 29, 2022 at 11:02 am #2441641

Janani

Dear David,

Thank you very much. This is what I had wanted. Just a small thing – perhaps I am looking at accuracy, but if you see closely, the top and bottom portions above and below the image are exactly not the same size. Perhaps the image is more aligned towards the top and not exactly at the center. Wonder why? It is okay if we are not able to close this small difference in gap, but it would definitely look much better if the image is exactly in the center.

Kind regards,

November 29, 2022 at 4:24 pm #2441974

Ying
Staff
Customer Support

The content in the left column includes the image and some spacing around it, and the right column too.

The section module is deprecated, so does the lightweight grid column plugin.

I would recommend installing GenerateBlocks and replacing your current layout with the Container block (section) and Grid block(columns).

November 29, 2022 at 7:13 pm #2442047

zhou

hi
I would recommend installing GenerateBlocks and replacing your current layout with the Container block (section) and Grid block(columns).

My page is made according to your instructions.

Something went wrong

But I didn’t find any problems on the AMP page.

Why is this?

URL:
https://changshaseo.net/java-development-framework
https://changshaseo.net/java-development-framework?amp=1

The WP Rocket cache has been closed

November 30, 2022 at 4:00 am #2442514
David
Staff
Customer Support
@Janani – add this CSS to remove the other space cbanging elemetns:
```
.zen-meditation .inside-grid-column {
    margin-bottom: 0;
}
.zen-meditation img {
    vertical-align: bottom;
}
.zen-meditation p:empty {
    display: none;
    margin-bottom: 0;
}
```
And you need to edit this CSS:
```
.zen-meditation {
    width: 75%;
    margin: 0 auto;
    background: #fff;
    padding: 25px 25px 10px;
}
```
So the Padding is equal on all sides eg. padding: 25px;

@zhou – can you raise a new topic so we can give you the focus you need.
December 1, 2022 at 3:21 am #2444221

Janani

Dear David

Thank you for your excellent support, but I am afraid that this code does not work. The image is still more towards the top than the bottom, but if nothing can be done about it, its okay i guess.

Just one question – you mention that sections and light weight grid columns are deprecated, does that mean that the website will stop displaying all the pages that have been made with these tools? I ask this because the entire website has been made using sections and LGC, and if this is happens, then i will have to reconstruct the entire website again, I am afraid. Can you please clarify on this?

Kind regards,

December 1, 2022 at 6:27 am #2444408

David
Staff
Customer Support

I don’t see the CSS i provided here on your site ? Where did you add it ?

Regarding Sections and LGC columns.
The main concern is they require the Classic Editor in WordPress.
We read on its Github:
Classic Editor is an official WordPress plugin, and will be fully supported and maintained until 2024, or as long as is necessary.

This could mean that in the future this will no longer be supported. And it could stop working in future versions of WP.

What does this mean if Classic editor stops working?

Pages built with Classic editor should still display on the frontend as they do today as the HTML and CSS will still be loaded.
But those built with Sections or other plugins that rely on classic editor won’t be editable. So you would have to replace those pages if you ever wanted to change them.

As there are millions of sites running classic editor i can’t see this happening anytime soon, and i would expect that WP would implement a solution even if it means not upgrading WP beyond a certain version to keep classic editor. But you may want to consider migrating to the Block editor if you can.

December 1, 2022 at 10:26 am #2445151

Janani

Dear David

Thank you very much for your detailed response. This is very helpful and I am relieved. So, I have added the css at the top and made the other changes you suggested, and you can see that the image is now skewed towards the bottom. Not sure why. Any help or suggestions here would be welcome.

Kind regards,
Author

Posts