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

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

Home Forums Support I'd like to be able to display my site like this

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #855088
    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!

    #855155
    Leo
    Staff
    Customer Support
    #855205
    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…

    #855221
    Leo
    Staff
    Customer Support

    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 🙂

    #855426
    Dan

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

    #855550
    David
    Staff
    Customer Support

    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?

    #855631
    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.

    #855651
    David
    Staff
    Customer Support

    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

    #855894
    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.

    #855906
    David
    Staff
    Customer Support

    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.

    #855943
    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?

    #855964
    David
    Staff
    Customer Support

    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.

    #856122
    Dan

    Yes, run everywhere, used that exact code

    #856128
    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.

    #856195
    David
    Staff
    Customer Support

    Try this:

    .entry-content>*:not(img), .blog #main {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.