Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] Single post image full width of body

Home Forums Support [Resolved] Single post image full width of body

Home Forums Support Single post image full width of body

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #196229
    Ciaran

    Hi Tom,

    I have a scenario that I may need to go full width of the browser wrap for the featured image. Is there a simple way to do this as I see the feature image finishes inside the content wrap assigned to the boxed size width.

    I am having full width header and footer, 1240px width on the content area. The home page is full width banner image, so I would somehow like to control those feature images on the posts to be full width. Ideally I would like to turn the top part of the posts to use the top feature image as a background image to the top banner section, that way I can control the max height without interfering with the aspect ration of the image by forcing height on the image.

    Hope that makes sense.

    #196247
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Turning them into a background image is quite complex, but you can force them to be full width by adding some CSS like this:

    .page-header-image-single.grid-container {
        max-width: 100%;
    }
    
    .page-header-image-single img {
        width: 100%;
    }

    Let me know if that works or not πŸ™‚

    #207178
    Alberto Aroca Camacho

    Hi TOM

    I would like to change the widht content single posts without altering the widht of the rest of the pages.
    At the moment my widht content is 1000 px and i would like to change widht content post from 1000 px to 800 px as i told you wihtout modifying the layout widht.

    How could i do it? I have been trying to find the solution but i ended up burned out.

    I hope you can help me

    Cheers

    Alberto

    #207237
    Tom
    Lead Developer
    Lead Developer

    You could do that with this CSS:

    body.single .grid-container {
        max-width: 800px;
    }
    #207388
    Alberto Aroca Camacho

    Thank you very much TOm.

    Only one more thing, Could i leave the menu with a diferent widht from the content post. For instance, the main menu with 1000 px and the content with 800 px?

    And could you recommend me some css basic course to learn about these simple stuffs that are very practical?

    Thank you again Tom. You are doing a great work. I am thinking to make a basic wordpress course with generatepress as i consider it as one of the best theme right now in terms of quality-price.

    Cheers

    #207412
    Tom
    Lead Developer
    Lead Developer

    To make the CSS only apply to the content container while leaving the navigation/header at 100px, you could do this:

    body.single .container.grid-container {
        max-width: 800px;
    }

    codecademy.com has some pretty good beginner courses for CSS.

    Personally, I think CSS is one of those things you just need to dive into and make mistakes with – after a while it just makes sense πŸ™‚

    #207424
    Alberto Aroca Camacho

    Awesome.

    Yeah when i have time i figure out to do one of these courses.I Think it will be worth it.

    Thank you again Tom πŸ˜‰

    #207425
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.