[FOL]

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!

[FOL]

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.

[tikaram]

@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

[tandem_mundo]

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

[tandem_mundo]

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.

[tikaram]

@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

[tandem_mundo]

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

[tikaram]

@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

[tandem_mundo]

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

[tikaram]

@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