image header size on mobile

The grey area you are referencing is based on the theme’s CSS code around line 1647

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
	display: table;
	height: 300px;
	height: 75vh;
	width: 100%;
}

That controls the height of the .custom-header container, where the height 75vh is the height of the viewing screen (75% of the height). The fallback height is 300px. You will need to play around with the values like I did here (just a very rough estimate) and commented out the vh height and changed 300px to 220px (approx height of your image when it shrinks down in height.

.has-header-image.twentyseventeen-front-page .custom-header, 
.has-header-video.twentyseventeen-front-page .custom-header, 
.has-header-image.home.blog .custom-header, 
.has-header-video.home.blog .custom-header {
    display: table;
    height: 220px;
    /* height: 75vh; */
    width: 100%;
}

The problem is that you will have to change the code values for height in the media queries as well for various screen sizes. The one posted above is for small mobile viewing such as a phone.

Going to be a tricky job to do this because of what you are wanting done with the header image. Perhaps take out the superimposed block with text off the image being as you already have that info in the branding container (title, etc).

Thanks for the reply child theme style. It seems complicated. Do you have any suggestion with a simple solution? I just wanted to make it presentable when you view it on mobile.

Thank you for the reply

You’re very welcome….unfortunately, there’s no easy solution without modifying the CSS code like I was suggesting and providing a height value for viewing your site on different screen sizes when on a phone.

Only other option would be to use an image without the block of text in it and use a logo image instead to get all that info into it. So your site logo would include the site title, site description, and the other part “Start up entrepreneurship in the Philippines” added…..or, add that part to the site description. Then, use the header image as the default function the theme comes with. Your image will still get partially hidden though on phones, but as mentioned, with this theme, there is no easy solution, unless someone else comes along with an alternative here in the forum.

Hello @jothecontentguy,

If you want you can add different image for mobile view.
Go to the Appearance > Customize > Additional CSS
(https://www.screencast.com/t/JSxqpr7lG) and paste code given below.

@media screen and (max-width: 768px) {
.custom-header{
    background: url(ADD PORTRAIT IMAGE URL);
    background-size: 100% 100%;
}}

Best Regards.

• This reply was modified 7 years, 1 month ago by niteshraghu.
• This reply was modified 7 years, 1 month ago by niteshraghu.

Hi @niteshraghu

when you say add different image for mobile view, do you mean adding another image? or replacing the existing image that I have? tried to put in the code with the URL on the new image and i don’t say any changes on the additional CSS menu

this solved the problem for me:

@media screen and (max-width: 480px) {

.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}
}