[Support request] I'd like to be able to display my site like this

[Dan]

https://tinylittlebusinesses.com/switching-to-convertkit/

Where images could auto fill the entire page, but body text should be contained within a certain value as above.

Is there a CSS that can help me achieve this? So far I can only contain the body text AND the images.

I’d like the page title, any images I add and eventually the extended notes to be able to fill the entire weight of the page.

Thank you!

GeneratePress 2.2.2

[Leo]

Hi there,

Two different suggestions here:
https://generatepress.com/forums/topic/different-width-between-text-and-photos-on-a-blog-entry/#post-728743

https://generatepress.com/forums/topic/how-do-i-create-this-container-style/#post-846824

Hope this helps!

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

[Dan]

Hey Leo, thanks for the quick reply.

Unfortunately I can’t get the desired look just with the knowledge found in those two articles. Also, with this CSS:

.entry-content>*:not(img) {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

i get partial the effect – meaning title is taking up 1000px of the screen, and body container only 600px. Images are also contained to same 600px…

[Leo]

Any chance you can link us to the page in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

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

[Dan]

I’ve added my website in the original topic. Any help greatly appreciated.

[David]

Hi there,

have you thought of using the Block Editor in WP 5? It has align-wide and align-full options that can be applied to the image?

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

[Dan]

Hi David, not a big fan of the block editor. In fact I’m still using the classic editor because I can’t wrap my head around the new interface.

[David]

The issue with your current method is that WordPress AutoP adds <p> tags around images. This topic may help:

https://generatepress.com/forums/topic/different-width-for-images-media-versus-text/#post-735165

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

[Dan]

Thanks David, I went through that page, but I’m having issues creating the PHP filter. I’ve edited the content.php file and added the code you’ve indicated, but that did not fix it. My knowledge in regards coding is rather limited.

[David]

Best way to add PHP functions is explained here:

https://docs.generatepress.com/article/adding-php/

If you’re not using a child theme then the Code Snippets plugin, link to which is in the article, is the best way.

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

[Dan]

I’ve installed the Code Snippets plugin, added in the php filter and it changed nothing… Should I use sections? Would that change anything?

[David]

just to confirm it is this snippet you need to add to code snippets:

// Remove P Tags Around Images 
function filter_ptags_on_images($content){
    return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_images');

Underneath the code editor there are options for where the code is to be run. Did you leave this on the default ? ie. Run everywhere.

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

[Dan]

Yes, run everywhere, used that exact code

[Dan]

Ok, I was wrong, it’s working fine. I needed to activate that newly created script via a small slider.

The problem I’m facing now is that my blog page is actually respecting the container width of 1000px instead of the custom CSS I’ve used:

.entry-content>*:not(img) {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

any tips on that?

Thanks again for your patience and for the prompt replies.

[David]

Try this:

.entry-content>*:not(img), .blog #main {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

[Author]

Posts