Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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!

    #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.

    #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

    #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

    #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.

    #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

    #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

    #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

    #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

    #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

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Page Header image chopped off top and bottom’ is closed to new replies.