[Resolved] How to contain the featured image within the header element

[Deep]

Hi,
I would like to know how to contain the entire featured image within the header element hero section. At the moment it is entirely spread over the header element.
You can see the screenshot here http://prntscr.com/neh1id

I want it on the right hand side of the header element. Please help.

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

so you would effectively want two columns? One with the Title etc on the left and the image on the right?

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

[Deep]

Thanks for your reply.
I want to achieve the following designs:
for desktop version
http://prntscr.com/nely84

for mobile version
http://prntscr.com/nelymn

Well, it is certainly achievable as per your recommendation but the mobile version may behave differently from that of the design ideas.
So, placing the featured image as a background image would have design accuracy in this regard.
Anyway, let me know what your suggestion is? You are certainly in a better position to advise me.

[David]

Can you share a link to the site with that header element set up like you had in your original post?

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

[Deep]

Actually, I am working on localhost. So, please bear with me. Please let me know what information you required in this regard.

[David]

It we be good to be able to see the Site so i can provide the exact CSS but you try:

1. In the Header Element set the background position to Right Center.
2. Add this CSS:

.page-hero {
    background-size: 50%;
}

Reduce or increase the % to resize the image.

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

[Deep]

Hi,
Thanks for your support. I have achieved it by

.page-hero {
background-size: contain;
}

Now please let me know how to disable the background image in mobile version only.

[David]

Try this CSS:

@media (max-width: 414px) {
    .page-hero {
        background-image: none !important;
    }
}

Please note that this will apply to all Header Elements. If you wish to apply it to only that specific Element then in the Header Element you can add a class name to the Element Classes field e.g custom-hero then replace the .page-hero in your CSS with .custom-hero

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

[Author]

Posts