custom header not re-sizing on mobile

[ccbread]

hi – i’ve got custom header images on a few pages, added via the “custom heading background” input in the “custom header options” field. then i also checked the box “Custom Heading Content spans entire screen width” right below that. it all looks good on laptop, but on mobile the image is not resizing (the revslider on my homepage does resize), so only about 15% of the left side of the image shows up.

http://www.arcprogram.org/about-us/

i tried to rectify this via css, but that image doesn’t actually seem to appear inside the “#custom-title-area” div when i inspect via firebug.

any suggestions on how to get it to scale properly on various mobile sizes?

thanks

[livemesh]

Did look at your site. You can have something like below at the bottom of your custom.css file to fix the issue. Pls vary these values as per your exact requirements. You can insert this type of CSS for other headers too in these blocks of media queries –

@media only screen and (max-width : 1024px) {
    #team-info-header { height: 210px; }
	#team-info-header blockquote { font-size: 28px !important; line-height: 36px !important;}

    }
@media only screen and (max-width: 767px) {
	#team-info-header { height: 210px; }
	#team-info-header blockquote { font-size: 18px !important; line-height: 28px !important;}

    }
@media only screen and (max-width: 479px) {

	#team-info-header { height: 150px; padding: 0;}
	#team-info-header blockquote { font-size: 14px !important; line-height: 20px !important; top: 0; margin: 10px auto;}

    }

[ccbread]

that works great – thanks very much for your prompt and clear support!

[Author]

Posts