Viewing 6 posts - 21 through 26 (of 26 total)
  • Author
    Posts
  • #168894
    catwingz
    Participant

    Or, as an alternative, please give me the code which will enable me to substitute another image for mobile and I will move on.
    Thanks again

    #168905
    Skandha
    Keymaster

    @catwingz: Hello there, Can you try the following?
    Remove the following CSS Code.

    @media screen and (max-width:1000px) {
            .custom-header-media img {
                    -o-object-fit:unset;
                    object-fit:unset;
            }
    }
    .custom-header-content {
            padding:150px 0 !important;
    }
    @media screen and (max-width:767px) {
    	.custom-header-content {
    		padding:150px 20px;
    	}
    }

    Then add the following CSS Code.

    .custom-header-media img {
    	position:unset;
    }
    .custom-header-content {
    	padding:0;
    }

    Let me know if this works out!
    Kind Regards,
    Skandha

    #169056
    catwingz
    Participant

    Hi Skandha,

    After making those changes the desktop view is fine, but the view on mobile is still squashed horizontally.

    Thanks

    #169070
    Skandha
    Keymaster

    @catwingz: Hello there,
    Since you have a long-width banner image the image text will get squashed in smaller screens. I don’t think you can much about that. Maybe you can keep a different header image for smaller screens.

    Kind Regards,
    Skandha

    #169096
    catwingz
    Participant

    Hello Skandha,

    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.

    I just tried out a fresh installation of the theme on another site with different hosting. In that scenario, instead of squashing the banner image on mobile, it crops it, treating it more like a background. Given this very different interpretation I am concerned we chose the wrong theme for this website.

    Please give me the code which will allow me to substitute a different image for mobile and get past this problem.

    Thank you

    #169130
    Skandha
    Keymaster

    @catwingz: Hello there,
    Can you post in the URL of the site where the background image is cropping the way you like?

    To have a different image on smaller screens
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    @media screen and (max-width:600px) {
    	.custom-header-content {
    		background-image:url("https://catchthemes.com/demo/euphony-pro/wp-content/themes/euphony-pro/assets/images/header-image.jpg");
    		background-size:cover;
    	}
    	.no-header-media-text .custom-header-media img {
    		display:none;
    	}
    }

    Replace the image URL with image of your choice.
    Let me know if this helps you out!
    Kind Regards,
    Skandha

Viewing 6 posts - 21 through 26 (of 26 total)
  • The topic ‘Resize header image’ is closed to new replies.