mnlynam

Forum Replies Created

Viewing 4 replies - 1 through 4 (of 4 total)
  • Forum: Themes and Templates
    In reply to: Resizing the custom header image on mobile
    mnlynam

    (@mnlynam)

    9 years ago

    I understand your problem. I wasn’t suggesting that would fix it. Rather, resizing your header image is the first step to correctly resolving your issue. Otherwise, the CSS becomes a bigger headache since you’d be forcing it to contain the header boundaries inconsistently with the actual dimensions of the image.

    Forum: Themes and Templates
    In reply to: Resizing the custom header image on mobile
    mnlynam

    (@mnlynam)

    9 years ago

    Hi again. Firstly, I suggest that you resize the header image to a smaller height (like 350px) and upload it to replace your current one via the WordPress theme editor, which will generate the responsive image code for each screen size. Then you could make other adjustments afterward. The actual height of your header image is probably the bulk of your issue to begin with.

    • This reply was modified 9 years ago by mnlynam.
    Forum: Themes and Templates
    In reply to: Resizing the custom header image on mobile
    mnlynam

    (@mnlynam)

    9 years, 2 months ago

    @matazone Hi, thanks for providing the URL. If you know what you’re doing, you can make the following changes to your /wp-content/themes/twentyseventeen/style.css file, or to keep the original unmodified and still get the same effect, you can dd the following as custom CSS (or create a child theme).

    1. Change the position of the header image from position: fixed to position: relative:
       

      .has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
	position: relative;
}
    2. Change the height of the header section to be more aesthetically pleasing for the smaller header image by reducing the header section height from height: 75vh to height: 25vh:
       

      .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 {
	height: 25vh;
}
    • This reply was modified 9 years, 2 months ago by mnlynam.
    • This reply was modified 9 years, 2 months ago by mnlynam.
    • This reply was modified 9 years, 2 months ago by mnlynam.
    • This reply was modified 9 years, 2 months ago by mnlynam.
    • This reply was modified 9 years, 2 months ago by Jan Dembowski.
    • This reply was modified 9 years, 2 months ago by mnlynam.
    • This reply was modified 9 years, 2 months ago by mnlynam.
    • This reply was modified 9 years, 2 months ago by mnlynam.
    Forum: Themes and Templates
    In reply to: Resizing the custom header image on mobile
    mnlynam

    (@mnlynam)

    9 years, 2 months ago

    I assume you’re referring to the vertical height. To do this, navigate to the /wp-content/themes/twentyseventeen/ folder and open the style.css file. Locate the following code block and replace the calculated vertical height (vh) to a different number (e.g. 50vh would make it half the original height):

    	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
	.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
	.admin-bar.home.blog.has-header-image .custom-header-media,
	.admin-bar.home.blog.has-header-video .custom-header-media {
		height: calc(100vh - 32px);
	}
Viewing 4 replies - 1 through 4 (of 4 total)