This topic contains 9 replies, has 5 voices, and was last updated by  Skandha 2 weeks, 5 days ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #159057

    Shieldmediaworks
    Participant

    I have a header image that has a figure on each side of the page and a black centre, when I minimize to view on cellphone the figures disappear and all I’m left with is the black middle, is there a way to have the image shrink appropriately?

    #159066

    sapana
    Participant

    @shieldmediaworks: Please post in your site Url so that I can look into those issues.

    Kind Regards,
    Sapana

    #159067

    Shieldmediaworks
    Participant

    Hi Sapana

    Thank you for wanting to look into this further, I am creating an adult themed website for my client. If this isn’t an issue for you the website address is http://www.wellingtonretreat.nz

    #159143

    Skandha
    Participant

    @shieldmediaworks: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    @media screen and (max-width:797px) {
    	.has-header-image .custom-header-media .wp-custom-header img {
    		object-fit:unset;
    	}
    }

    Let me know if this is what you want.
    Kind Regards,
    Skandha

    #159162

    Shieldmediaworks
    Participant

    Wow! This is so close, closer than I have been in days. The images look quite stretched is there a ratio thing happening? do I need to alter the height as well as the width? What would this look like when put in CSS?

    Thank you so much for your help, it is greatly appreciated.

    #159218

    Skandha
    Participant

    @shieldmediaworks: I don’t think you can do much with the images looking stretched on smaller screens. As the header image you have put has two figure on the right and the left side it will look stretched when you decrease the width of screen in order to adjust with the screen size.

    Kind Regards,
    Skandha

    #163405

    centrescene
    Participant

    Hello,
    I would like the header image (1920×1080) of the site I create to be responsive on a tablet and mobile.
    How to do this, please?

    Thank you for advance.
    Regards.

    #163470

    Skandha
    Participant

    @centrescene: Please post in your site URL so that I can look into the issue.

    Kind Regards,
    Skandha

    #164404

    valtht
    Participant

    Hiya same thing here… can’t seem to fit the header image in the tablet or mobile view, if you have any idea how to do this, or if I just could upload an alternate header image for tablet/mobile view (in that case, I really need a step by step explanation…)?

    have a nice day
    http://saamaraproject.com/
    Valentine

    #164537

    Skandha
    Participant

    @valtht: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    @media screen and (max-width:767px) {
    	.has-header-image .custom-header-media .wp-custom-header img, .has-header-video .custom-header-media .wp-custom-header video, .has-header-video .custom-header-media .wp-custom-header iframe {
    		object-fit:fill !important;
    	}	
    }

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

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

You must be logged in to reply to this topic.