Support » Fixing WordPress » Change height on cover image when shown on phone

  • Hello,

    I would like to change the height on my cover images when a phone is used.

    I have tried these CSS codes but it is not working:

    @media only screen and (min-width: 200px) and (max-width: 800px) {
    	.wp-block-cover .wp-block-cover-image {
    	height: 70%;
    }
    	
    	.wp-block-cover.alignfull-has-background-dim ::before {
    		height: 70%;
    		
    	}
    	
    	}
    }

    Please help me, I bet it’s something very simple that I have missed 🙂

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Please try the following code:

    @media only screen and (min-width: 200px) and (max-width: 800px) {
    	.wp-block-cover.wp-block-cover.alignfull.has-primary-background-color.has-background-dim {
    		min-height: 500px !important;
    	}
    }

    You can increase/decrease the min-height value as per the requirement.

    you could try vh
    height:70vh;

    Thanks for your replies, but none of them works. Any more suggestions?

    I am not able to see the CSS on the site. Did you remove it?

    If any cache is there, please clear that after adding the code. You can try adding once in Appearance -> Customize -> Additional CSS

    Now I have cleared the cache. And the code is in my Additional CSS.

    I can see the following code:

    @media only screen and (min-width: 200px) and (max-width: 800px) {
    	.wp-block-cover.wp-block-cover-image .alignfull.has-primary-background-color.has-background-dim {
    		min-height: 500px !important;
    	}
    }

    but that’s not what I sent. Please replace that with the following:

    @media only screen and (min-width: 200px) and (max-width: 800px) {
    	.wp-block-cover.alignfull.has-primary-background-color.has-background-dim {
    		min-height: 500px !important;
    	}
    }

    Thank you, but it is not working with code you send. I copied it now and nothing happens when I change the height.

    For me, it is showing the reduced height now. I can see 500px min-height of the cover. Please check in the incognito mode or clear cache(browser also) then check.

    That’s weird, I have checked in incognito and nothing changes..

    By the cover I mean the big picture with text in it that is right under the nav bar. When I reduce the size and look on Responsinator the image is very tall and I would like to make it less taller.

    By the cover I mean the big picture with text in it that is right under the nav bar. When I reduce the size and look on Responsinator the image is very tall and I would like to make it less taller.

    Yes got that. I can see you are trying to use max-height: 100px !important; but it should be min-height: 100px !important;.

    After doing the above please check in the real device.

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.