[catwingz]

I am trying to replace the stock recommended header image with one that is shorter on the page, as wide as the stock image but bringing the main content up closer to the top. The problem is that my image is being blown up to take up the original height. I’ve looked through the CSS and can’t find what is controlling this. Mine is 1920 x 573.

How can I change this?

Thank you

[Skandha]

@catwingz: Please insert the image so that I can look into the issue on your site.

Kind Regards,
Skandha

[catwingz]

I’ve put it back up. A giant middle with both sides out of view. Thank you

[Skandha]

@catwingz: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.custom-header-content{
	padding:112px 30px !important;
}

Let me know if this works out!
Kind Regards,
Skandha

[catwingz]

Hi Skandha,

This was great progress and led me to realize there is a second problem.

I adjusted the code to `.custom-header-content{
padding:112px 40px !important;
}
`
to allow the full width of the image to show. Then I moved onto removing the Header Media Title & Text because they aren’t needed. The problem with this is when there is no text in those Customizer fields the banner doesn’t show either. Is there CSS to compensate for this?

Thank you!

[Skandha]

@catwingz: There seems to be a bug with Header Image not showing up when the header media title and text in empty. The issue will be fixed soon.
For the time being you can use the following CSS Code.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.custom-header-content .entry-title {
        display:none;
}

Let me know if this helps you out!
Kind Regards,
Skandha

[catwingz]

Hi Skandha,

I added the CSS and deleted the text I had put in to keep the banner visible—and the banner disappeared again. What next?

Thank you

[Skandha]

@catwingz: You don’t need to remove the text from the customizer as the CSS Code will do that. You seem to have figured it out. This issue will be fixed in the next theme update.

Kind Regards,
Skandha

[catwingz]

Hi Skandha,

I don’t know how I missed this before, but now the banner image stays full-sized in mobile. What should I add to restore responsiveness?

Also, I’d like to be able to launch it soon. Are you able to tell me when the theme will update to fix the text issue in the banner?

Thank you

[Skandha]

@catwingz: Hello there,
I don’t think you can do much with it. As you have wide banner image it cannot fit into the smaller screen of mobile phone or tablet screens.

Regarding the update it should be released by tomorrow. I will let you know when the update is released.
Kind Regards,
Skandha

[catwingz]

Hi Skandha,

This doesn’t make any sense. My banner image is smaller than the stock one that comes with the theme.
Stock: 1920px x 822px
Mine 1920px x 573px
Both are 72 ppi.

This all started because we wanted it to take up less room on the page. I used the code you suggested and ended up keeping the padding figure the same. Surely there is a better solution to this situation.

Thank you

[Skandha]

@catwingz: Maybe adding the following CSS can help you out.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width:1000px) {
	.custom-header-media img {
		-o-object-fit:unset;
		object-fit:unset;
	}
} 

Let me know if this helps you out!
Kind Regards,
Skandha

[catwingz]

Hi Skandha,

First, I am happy to report that the theme update fixed the problem with the header media title and text.

The CSS was an improvement, but still not quite there. Now the banner image is reduced to mobile dimensions but, instead of shrinking the image, it is instead squashed horizontally.

I experimented and commented out the

.custom-header-content{
	padding:112px 30px !important;
}

and restored the stock image. I discovered that it is squashed in mobile as well, so this is a flaw in the theme and will affect everyone who uses it. Help!

[catwingz]

Hi again,

It appears that the theme update also included a change to the intended dimensions of the banner. When I restored my code and image it is now also being cropped vertically—much narrower than before. This is a step backwards. I hope this can be resolved soon.

Thank you

[Skandha]

@catwingz: You can remove the following CSS and the header image should look fine.

.custom-header-content{
	padding:112px 30px !important;
}

Let me know if this works out!
Kind Regards,
Skandha

[catwingz]

Hi Skandha,

No, this doesn’t solve anything. Without that CSS the image goes back to being giant on desktop. Also, as I reported previously, on mobile both my image and the stock one for the theme appear squashed horizontally with or without the code.

Before the theme update my image looked fine with the code, but now it’s too short.

I may have solved the desktop issue by changing the CSS to

.custom-header-content{
        padding:150px 0 !important;
}

However, it doesn’t help mobile, and everyone is going to have problems with this. I hope someone there can figure out a solution and update the theme.

Thank you

[Skandha]

@catwingz: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width:767px) {
	.custom-header-content {
		padding:100px 0px;
	}
}

You can alter the padding according to your requirement.
Let me know if this solves the header banner issue on mobile screens.
Kind Regards,
Skandha

[catwingz]

Hi Skandha,

This CSS doesn’t solve the problem, but by experimenting with it and other parameters it is becoming clear that “.custom-header-content” appears to control the tinted overlay of the image, and not the image itself.

This needs to be improved upon, but in a jumpy way is solving the size issue with the image:

 @media screen and (max-width: 450px){.custom-header-media img,.header-media,.wrapper {
                /*padding:100px 0px;*/
height: 60% !important;
	 }}
 
@media screen and (max-width:767px){.custom-header-media img,.header-media,.wrapper {
height: 60% !important;
	 }}

However, while it fixes the image, it also results in a large black band beneath the banner image. I could live with my jumpy code if you can tell me how to get rid of the black band.

I tried adding the .custom-heder-content.sections.header.media.section selector to this but it didn’t work.

Thank you

[Skandha]

@catwingz: I’m afraid it is not possible not way. To adjust the banner size you will need to use the padding property of .custom-header-content selector.

Alternatively what you can do is resize the banner image so that it shows up well in smaller screens and you can different image in desktop screen and mobile screens.

Let me know if this helps you out!
Kind Regards,
Skandha

[catwingz]

Skandha, this code doesn’t accomplish anything. Have you actually tried it? When I use it or plug in all sorts of other numbers the mobile view remains the same. As I have pointed out, since the stock image is affected as well, I am certain this is a problem with the theme which has yet to be addressed.

To recap, my banner image is smaller than the stock one which comes with the theme.
Stock: 1920px x 822px
Mine 1920px x 573px
Both are 72 ppi.

Sorry to be such a pest about this but this isn’t getting anywhere.

Thank you

[Author]

Posts