Twentyseventeen white space

Also, is it possible to limit the size of the header image on other pages except for the home page? On the home page I want the header image to be big like it is, but when someone clicks on a navigation link I want the slider to recede and reveal the page the visitor is going to. It would be best if I could adjust the amount of the header image that will show on secondary pages (excluding home page). The default setting that twentyseventeen had before I installed smart slider is pretty good but it is no longer effective. Thanks again!

I used these two css entries and it seems to solve most of the white space issue with few exceptions.

.custom-header {
margin-bottom: 0 !important;
}

.site-branding {
padding: 0;
}

In desktop, the problem seems to be gone in both chrome and firefox browsers. However, in mobile, with the chrome browser there is still the white space above the menu. Also, in firefox, the white space appears on the home page when I scroll down. Other pages seem fine.

In regards to my second question about the header size reduction when visiting other pages besides home page. Can we make it so the amount of the reduction can be set differently for mobile and desktop? For example, with mobile the header image seems to get in the way more than on desktop, especially with individual products. But not so much with pages.

Thank you.

Hi @mmhgloba

1) Mobile space
The mobile spacing happens because of this TwentyTwenty CSS:

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%;
}

It sets the slider’s header to be 75vh. You should override the code to allow the container to have auto height.
E.g:

div#page header#masthead div.custom-header {
    height: auto;
}

2) Slider size in other pages
Every slider can only have one height. So if your slider has 500px height then it will have this height on every page where you publish it.
If you want your slider to have less height, you should create another slider which isn’t as tall as the original one, then publish this slider on all page but the home page.

Are you using the PHP publishing? You can make a slider show up on your homepage like this:
https://smartslider.helpscoutdocs.com/article/1720-publishing-on-wordpress#only-on-the-homepage
You could create an else condition to display the second slider on the other pages:

<?php
  if( is_home() || is_front_page() ) {
    echo do_shortcode('[smartslider3 slider=1]');
  } else {
    echo do_shortcode('[smartslider3 slider=2]');
  }
?>

3) Different slider height on mobile and desktop
By default (without any layers or changes made on slide level) the slider size works that way that it scales down proportionally based on the slider size ratio, with the Slider Size (at Slider settings > Size tab: https://smartslider.helpscoutdocs.com/article/1774-slider-settings-size ) sets.
Eg. if your slider size is 1000×500 then on a 375px mobile devices the slider will be 375x187px.

However, Default layers can increase the height of the slide (thus the height of the whole slider) when they need more vertical space. Usually the problem is the most noticeable on mobile devices, which have limited width. Common reasons that cause such problems:

• <b>Large or unnecessary margins or paddings</b>: Margins and paddings are not meant to be used for positioning, but for creating distance. Using margins to place your layers, for example, to the bottom of the slide will create unnecessary spacing, which increases the height of the whole slider. Adjust the margins to an appropriate value, and rather use the Vertical Align to position your layers.
• <b>Unused layers</b>: If you have empty layers or rows, they can increase your slider’s height. Check the Layer List and make sure all layers you have are used. If you don’t need a layer anymore, delete it completely.
• <b>Too many layers</b>: Having too many layers likely increases the slider size. Try hiding some layers.
• <b>Large font sizes</b>: Having large fonts in your slider can also increase the height of your slider. Try adjusting the font sizes on mobile and tablet devices.

In your slider’s case it seems paddings are used for positioning inside the Content layer, and these paddings are making the slider to be so tall on mobile. I’d recommend watching the Alignment video:

and adjust your slide content to avoid having to use large padding/margin values.

Hello,

The white space on mobile is gone, thank you for providing the solution. In regards to the size of header image between pages, I hope there is a easy one step solution.

1) Is it possible to just reactivate the mechanism that automatically recedes the home page? The default receding function that was on the original twenty seventeen theme would be fine. It displayed the full header image on the home page and auto adjusted for all other pages on the website at about a 60-70% reduction. Is there a css code to reactivate this?

2) If proposal one is not possible, then your suggestion to create two sliders could also work well. If I understand correctly I only need to create the second slider for display on all other pages excluding the home page. Then insert the short codes accordingly into the php code you provided:

<?php
if( is_home() || is_front_page() ) {
echo do_shortcode(‘[smartslider3 slider=1]’);
} else {
echo do_shortcode(‘[smartslider3 slider=2]’);
}
?>

But where do I insert this PHP code when I have inserted the two smart slider short codes? I like the header image above menu like it is now, so I want it to stay the same only alternate to the second image with reduced size when not on the home page.

I do not think it a good idea for me to try and locate where to insert it, it would be like rolling the dice because I do not have any experience. Can you please provide the correct location to insert the above php?

Also, what do I do with the code that has already been inserted here: \wp-content\themes\twentyseventeen\template-parts\header\header-image.php ?

Many thanks for your assistance,

Edwin

Hi @mmhgloba

1) One slider can only have one slider size. You could try putting back TwentyTwenty’s height reducer, but there’s a chance it would crop off actual content (like your buttons). So the easiest solution would be just using two sliders, which have different height.

2) You can only use PHP coding for this.
You made changes to the \wp-content\themes\twentyseventeen\template-parts\header\header-image.php so I assume this is where you published the current slider. Just replace the current slider’s PHP code with the if conditioned code.

Also, make sure you use the correct slider ID for the sliders you want displayed. (Basically, just copy the sliders’ shortcode inside the do_shortcode().)

This is the original header-image.php

<?php
/**
* Displays header media
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since Twenty Seventeen 1.0
* @version 1.0
*/

?>
<div class=”custom-header”>

<div class=”custom-header-media”>
<?php the_custom_header_markup(); ?>
</div>

<?php get_template_part( ‘template-parts/header/site’, ‘branding’ ); ?>

</div><!– .custom-header –>

Here is the php code for the two different sliders with the correct short code inserted:

<?php
if( is_home() || is_front_page() ) {
echo do_shortcode(‘[smartslider3 slider=”2″]’);
} else {
echo do_shortcode(‘[smartslider3 slider=”3″]’);
}
?>

Kindly insert the new code into the header-image.php file exactly as I would paste it into the cpanel file \themes\twentyseventeen\template-parts\header\header-image.php. Then I will insert the complete code.

When I inserted the above code, it showed a red x, indicating something was not right. So I did not save it. Please post the header-image-php. exactly as it should look with the two short codes referenced above. I will then insert it into the header-image.php file.

Hi @mmhgloba

You should try putting the slider’s codes in place of the <?php the_custom_header_markup(); ?> code:
https://smartslider.helpscoutdocs.com/article/1819-add-smart-slider-3-to-twenty-seventeen-theme
I think this is what you replaced previously.

Similarly to:
https://pastebin.com/zgnrq5Gz

That is what I did before. I did it again and there is a red x showing. If you believe that what you are telling me to do is correct, why can’t you paste a copy of the completed header-image.php here? You are supposed to be the programmer not me, I am a guinea pig apparently.

Hi @mmhgloba

I tried the code in the Pastebin link, so it’s correct and should work fine.

Are you trying to edit from WordPress’s backend? You should never edit files there, especially not the active theme’s (or plugins’) files. Edit via FTP or CPanel. This way you can always revert back your changes, in case you’d need that.

WordPress often stops editing the theme files when they think (not necessarily correctly) that the edit can cause problems with the theme. That’s another reason to work via FTP (or CPanel).

I am editing in cPanel like I always do. Just paste the code you are using here, what are you afraid of?

Does cPanel prevent the editing? I’m not that familiar with cPanel, so I’m not sure why does it prevent the editing.

Try creating a new .php file (either on your computer, or on the server via cPanel) where you can put the code in. If the file is on your computer, and upload it next to the original header-image.php. Then rename the original file (e.g. to header-image2.php ) and rename the new file to header-image.php. This way you wouldn’t need to actually edit the file, but you should still be able to have the codes.

You are a programmer and you are not familiar with cPanel? I do not trust what you are telling me. When a red x shows next to the code, something is wrong and if it is saved, the website will crash.

Obviously something is wrong with the code I am using which you recommended. Additionally, you are playing hide and seek with the code you say is supposed to work.

I want a second opinion about this. Please ask your supervisor to assure me about what you are saying.

Hi @mmhgloba,
At first please upload the content of that file what cPanel marks syntactically incorrent. Please upload it to pastebin as www.ads-software.com forum mess up characters if you do not mark it as code: https://pastebin.com/

Also I can comfirm you that the code what Ramona sent you is syntactically correct:

<?php
  if( is_home() || is_front_page() ) {
    echo do_shortcode('[smartslider3 slider=1]');
  } else {
    echo do_shortcode('[smartslider3 slider=2]');
  }
?>

Also the linked file is correct too: https://pastebin.com/zgnrq5Gz

Ps.: Please be aware of thatthere are several cPanel versions/themes and we are not able to see what you see on your screen. Also our solution is not related to cPanel or any other server configuration panel. You need to change the file in any way supported by your host. This is why we tell we are not familiar with that cPanel error.

I do not have a paste bin account. Better yet, I have a screen shot of cPanel showing the code entered and the line of code that they flagged with the red x. That way you can see exactly what I was seeing. Apparently I cannot upload it here, how can I send it to you?

That’s fine if you upload a screen about what you see. You can use for example imgur: https://imgur.com/

Also you can use Pastebin without registering. https://i.imgur.com/bbxbCUL.png