[Resolved] no padding when I use media/text block with media (photo) on the left side

[Alana]

Hi,

I’ve noticed that when I use a media/text block in a post (with the photo on the left and the text on the right), there is no padding for the image on the left side. I would like the photos to line up with my overall post text on the left. Please let me know how I can do this.

Thank you!
Alana

[Leo]

Hi Alana,

I checked the page but not sure which image you are referring to?

I don’t see a image on the left with text on the right.

Let me know if I’m missing something 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alana]

Hey Leo, please see this Destinations – North America – article for an example of the issue:

https://www.coursecharted.com/destinations/north-america/vegan-restaurants-las-vegas/

It recurs every time I use a media + text block (the text or photo I’m using goes all the way to the left of the page instead of aligning with the rest of the content).

Thanks for your help!

[Leo]

Can you try this CSS?

.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull {
    margin-left: 0;
    width: inherit;
    max-width: inherit;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alana]

Should I put it into Simple CSS or into the CSS at the bottom of the post?

[Leo]

Try the global editor of SimpleCSS.

If you add it to the metabox at the end of the post, it will only apply to that specific post.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alana]

That didn’t work, puzzling… thank you for your efforts though, I appreciate it Leo! Any other ideas?

[Leo]

Not seeing the CSS being added at all.

Any caching plugins?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

Also looking at the source, you already have CSS added in the Additional CSS field in the customizer so might as well add the extra CSS at the same place 🙂

Then you shouldn’t really need SimpleCSS at all.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alana]

I added it, looked for the change and then removed the code when it didn’t work. I’ve added it back so you can check it out. Thanks!

[Leo]

Edited the CSS above:
https://generatepress.com/forums/topic/no-padding-when-i-use-media-text-block-with-media-photo-on-the-left-side/#post-931677

Can you give it another shot?

Please leave the code in even if it doesn’t work – it’s impossible for us to tell why something doesn’t work without seeing it 🙂

Thank!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alana]

Hey Leo, thanks for your help, it seems to have helped with most of the media / text blocks! But, the media / text block under the “PublicUs” subheading at the link below has moved to the right too much and is now not aligned with the rest of the content.

https://www.coursecharted.com/destinations/north-america/vegan-restaurants-las-vegas/

[Leo]

So it is actually still aligned, just that WordPress added default padding to the text part which makes it look like misalignment – it is the same when text is on the right.
https://www.screencast.com/t/zo4hiQCfHI

Would you mind trying another solution?

So instead of using text & media block, try using columns block instead to create your own text and media part.

I believe that should offer much more flexibility.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alana]

Thanks for the info, Leo, I appreciate you taking the time to help me and walk me through this!

Is there code I can use to remove that padding? Or will it mess up other areas?

I can try to use columns from hereon-out but there’s no quick way to transform the existing text/media blocks as far as I can tell.

[Leo]

Try this CSS:

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    padding-left: 0;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts