Featured image under floating logo and menu

[Pavla]

Hi! I want a floating logo left and menu right like it is displayed now (e.g. 30px high), and the featured image like hero (full width with no paddings) under the logo and menu.
No fix height as if there is no featured image i dont want that space, i hope I explain myself?

If I put the featured image in the header element with the logo and put some text inside it (test) appears but not with all the height of that imag, just a strip. If I would make the header higher that wouldn’t work in case i don’t have a featured image. mhhh.

I am working on a static page as those are the most important for me right now, but on single posts its the same thing.

I cant add more links here.

[Leo]

Hi there,

Sorry not quite sure if I fully understand.

So what is the current issue?

The padding on both sides of the featured image?

If so can you set the location to above content?
https://docs.generatepress.com/article/adjusting-the-featured-images/

Let me know 🙂

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

[Pavla]

Yeah that helped, thank you! but is there a way to stretch the width depending on the width of the whole window on 100% if there is not such size available? In most cases there is a good size to cover a big desktop window, but in some not.
thanks!

[David]

Hi there,

try adding this CSS:

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

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

[Pavla]

Perfect! Thank you so much!

[David]

You’re welcome

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

[Pavla]

Hi again, sorry! It seems that the stretching doesn’t apply now, i don’t know if i changed something or if i just didn’t noticed before, but on single posts its not stretched, its just no really visible on those which have big images. can you please tell me what css should i put in?
thanks!!

[Leo]

The best solution is to use a picture with a minimum width of 1100px.

Or you can try this CSS but it would be out of ratio:

.featured-image img {
    width: 100%;
}

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

[Pavla]

ok ill have that in mind, i just have so many old post it is impossible to change the images to bigger once. but this is a good solution for now. thank you!

[Leo]

No problem 🙂

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

[Author]

Posts