Page Header image chopped off top and bottom

Tagged: header image

This topic has 9 replies, 3 voices, and was last updated 6 years, 11 months ago by tikaram.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
December 4, 2017 at 5:35 pm #127398

FOL
Participant

I use Catch Adaptive Free, and for some of the pages of my site I’ve chosen to change the Header Image, using the “Header Featured Imagine Options” at the bottom of the edit page. On my Windows 10 laptop, with Chrome or Edge browsers, the alternate header image is lopped off at the top and bottom, while on a Windows Surface tablet it displays the full image exactly as I expected. This alternate image was designed in the proportions specified in the “Header Image” selection (1680 x 720 shown as desired; my image is 1575 X 675).
My site address is davislibraryfriends.org, but the pages I’m concerned about aren’t yet linked from there. The troublesome pages can be seen at davislibraryfriends.org/davisjuneteenth
Desperately would like this to display correctly on all computers! Because we’re a non-profit, upgrading from the free version isn’t a possibility. Thanks!

December 4, 2017 at 8:44 pm #127399

FOL
Participant

Original poster again. I got a message to update to latest Windows 10 version. Did that (which took awhile!) and magically my issue went away!! But can I count on users to have update their computers?? I also have not tried on any Apple products.

December 5, 2017 at 1:28 am #127422

tikaram
Participant

@fol : Let me know if you have any further issues. The windows version has got nothing to do with the header image issue. Maybe, you will need to look on other areas.

Regards,
Tikaram

December 16, 2017 at 1:25 am #128127

tandem_mundo
Participant

Hi,

I uploaded the reccomended header image size 1920 X 1080. But the image is getting cut off on top and bottom. Please help. This is my blog- http://tandem-mundo.com

Thank you
Vasu

December 16, 2017 at 1:47 am #128128

tandem_mundo
Participant

Also, I opened it in a private window and the top of the image is cut off even more, it looks very bad. Please help.

December 18, 2017 at 1:50 am #128178
tikaram
Participant
@tandem_mundo : Go to Appearance => Customize => Additional css and add the following css.
```
@media screen and (min-width: 48em) {
.custom-header-content {
		padding: 450px 120px;
}
}
```
Let me know if this resolves your issue.

Regards,
Tikaram
December 18, 2017 at 10:43 am #128201

tandem_mundo
Participant

Hi Tikaram

It resolved the issue on desktop.

On phone view, it’s getting a little cut off.
On iPad view, it has not been resolved, still getting fully cut off.

Please help.
Thanks
Vasu

December 19, 2017 at 3:02 am #128239
tikaram
Participant
@tandem_mundo : Please try adding the following css. Let me know if this resolves your issue.
```
@media screen and (max-width: 48em) {
	.custom-header-content {
		padding: 25% 60px;
	}
}
```
Regards,
Tikaram
December 21, 2017 at 11:30 am #128435

tandem_mundo
Participant

Hi Tikaram

This works, however now the main image is too big- it seems blown up. I need to scroll one and half pages down to get to the next part. How can I keep it enough to just fill one screen and be able to see the full image? right now the image is blown up and the whole original image cannot be seen. http://www.tandem-mundo.com
Thank you

December 22, 2017 at 5:50 am #128476
tikaram
Participant
@tandem_mundo : Please try uploading image with lesser height. If you would like to retain the original image size use the following additional css
```
.custom-header::before {
	background-size:contain;
}
@media screen and (max-width: 480px) {
.custom-header-content {
	padding: 0 37px;
}
}
```
I recommend you to upload image with lesser height as it is used as a background image, some part of the image gets cropped on different devices. Let me know if this resolves your issue.

Regards,
Tikaram
Author

Posts