Tagged: catch inspire, header media title
- This topic has 25 replies, 2 voices, and was last updated 5 years, 5 months ago by
Skandha.
-
AuthorPosts
-
February 28, 2019 at 12:15 am #166888
catwingz
ParticipantI 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 #166906Skandha
Participant@catwingz: Please insert the image so that I can look into the issue on your site.
Kind Regards,
SkandhaFebruary 28, 2019 at 11:30 am #166926catwingz
ParticipantI’ve put it back up. A giant middle with both sides out of view. Thank you
March 4, 2019 at 11:22 pm #167215Skandha
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,
SkandhaMarch 5, 2019 at 7:01 pm #167276catwingz
ParticipantHi 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 #167395Skandha
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,
SkandhaMarch 7, 2019 at 5:56 pm #167434catwingz
ParticipantHi 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 #167467Skandha
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,
SkandhaMarch 15, 2019 at 1:30 am #167906catwingz
ParticipantHi 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 #167925Skandha
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,
SkandhaMarch 15, 2019 at 2:19 pm #167962catwingz
ParticipantHi 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 #168194Skandha
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,
SkandhaMarch 20, 2019 at 11:55 pm #168353catwingz
ParticipantHi 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 #168440catwingz
ParticipantHi 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 #168606Skandha
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,
SkandhaMarch 25, 2019 at 1:27 am #168613catwingz
ParticipantHi 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 #168715Skandha
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,
SkandhaMarch 28, 2019 at 1:16 am #168825catwingz
ParticipantHi 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 #168840Skandha
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,
SkandhaMarch 28, 2019 at 7:27 pm #168893catwingz
ParticipantSkandha, 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
-
AuthorPosts
- The topic ‘Resize header image’ is closed to new replies.