Tagged: ,

Viewing 20 posts - 1 through 20 (of 26 total)
1 2
  • Author
    Posts
  • February 28, 2019 at 12:15 am #166888
    catwingz
    Participant

    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

    February 28, 2019 at 5:24 am #166906
    Skandha
    Participant

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

    Kind Regards,
    Skandha

    February 28, 2019 at 11:30 am #166926
    catwingz
    Participant

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

    March 4, 2019 at 11:22 pm #167215
    Skandha
    Participant

    @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

    March 5, 2019 at 7:01 pm #167276
    catwingz
    Participant

    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!

    March 7, 2019 at 1:06 am #167395
    Skandha
    Participant

    @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

    March 7, 2019 at 5:56 pm #167434
    catwingz
    Participant

    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

    March 8, 2019 at 12:56 am #167467
    Skandha
    Participant

    @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

    March 15, 2019 at 1:30 am #167906
    catwingz
    Participant

    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

    March 15, 2019 at 5:05 am #167925
    Skandha
    Participant

    @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

    March 15, 2019 at 2:19 pm #167962
    catwingz
    Participant

    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

    March 19, 2019 at 2:49 am #168194
    Skandha
    Participant

    @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

    March 20, 2019 at 11:55 pm #168353
    catwingz
    Participant

    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!

    March 22, 2019 at 2:08 am #168440
    catwingz
    Participant

    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

    March 25, 2019 at 12:36 am #168606
    Skandha
    Participant

    @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

    March 25, 2019 at 1:27 am #168613
    catwingz
    Participant

    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

    March 26, 2019 at 4:32 am #168715
    Skandha
    Participant

    @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

    March 28, 2019 at 1:16 am #168825
    catwingz
    Participant

    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

    March 28, 2019 at 7:08 am #168840
    Skandha
    Participant

    @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

    March 28, 2019 at 7:27 pm #168893
    catwingz
    Participant

    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
Viewing 20 posts - 1 through 20 (of 26 total)
1 2
  • The topic ‘Resize header image’ is closed to new replies.