[Resolved] Single post image full width of body

[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.

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

You could do that with this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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 😉

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts