My website has a very simple introduction box over an image on the homepage, however the background image expands to the point that significant scrolling is involved just to read the content column.
How can I made it to where my website opens up with my content centered (no scrolling/scrollbar), header on top visible, and footer on bottom visible all without scrolling?
Hi There,
Thanks for writing in!
The section height always depends on the content and space you have inside it.
To make it windows height please us this Javascript in the custom JS by clicking on the JS button in left.
jQuery(function(){
jQuery('#section-1').css({'height':(jQuery(document).height())+'px'});
jQuery(window).resize(function(){
jQuery('#section-1').css({'height':(jQuery(document).height())+'px'});
});
});
Please remove all padding from the section. Put padding on the row that have the content column to adjust the content in middle.
Hope this helps!
Thanks
Your wording here is a bit confusing
The JS you mentioned didn’t change anything with respect to the extra space on the home-page. Even after removing all the padding I used in the text element, no changes appeared.
Hi There,
First of all, please remove this following PHP codes from your Theme Options > CSS, because that is not the right place for this code.
<?php
// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================
// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
// 01. Enqueue Parent Stylesheet
// 02. Additional Functions
// =============================================================================
// Enqueue Parent Stylesheet
// =============================================================================
add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );
if ( ! function_exists( 'x_social_global' ) ) :
function x_social_global() {
$facebook = x_get_option( 'x_social_facebook', '' );
$twitter = x_get_option( 'x_social_twitter', '' );
$google_plus = x_get_option( 'x_social_googleplus', '' );
$linkedin = x_get_option( 'x_social_linkedin', '' );
$xing = x_get_option( 'x_social_xing', '' );
$foursquare = x_get_option( 'x_social_foursquare', '' );
$youtube = x_get_option( 'x_social_youtube', '' );
$vimeo = x_get_option( 'x_social_vimeo', '' );
$instagram = x_get_option( 'x_social_instagram', '' );
$pinterest = x_get_option( 'x_social_pinterest', '' );
$dribbble = x_get_option( 'x_social_dribbble', '' );
$flickr = x_get_option( 'x_social_flickr', '' );
$behance = x_get_option( 'x_social_behance', '' );
$tumblr = x_get_option( 'x_social_tumblr', '' );
$whatsapp = x_get_option( 'x_social_whatsapp', '' );
$soundcloud = x_get_option( 'x_social_soundcloud', '' );
$rss = x_get_option( 'x_social_rss', '' );
$output = '<div class="x-social-global">';
if ( $facebook ) : $output .= '<a href="' . $facebook . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon=""></i></a>'; endif;
if ( $twitter ) : $output .= '<a href="' . $twitter . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon=""></i></a>'; endif;
if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon=""></i></a>'; endif;
if ( $linkedin ) : $output .= '<a href="' . $linkedin . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon=""></i></a>'; endif;
if ( $xing ) : $output .= '<a href="' . $xing . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon=""></i></a>'; endif;
if ( $foursquare ) : $output .= '<a href="' . $foursquare . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon=""></i></a>'; endif;
if ( $youtube ) : $output .= '<a href="' . $youtube . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon=""></i></a>'; endif;
if ( $vimeo ) : $output .= '<a href="' . $vimeo . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon=""></i></a>'; endif;
if ( $instagram ) : $output .= '<a href="' . $instagram . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon=""></i></a>'; endif;
if ( $pinterest ) : $output .= '<a href="' . $pinterest . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon=""></i></a>'; endif;
if ( $dribbble ) : $output .= '<a href="' . $dribbble . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon=""></i></a>'; endif;
if ( $flickr ) : $output .= '<a href="' . $flickr . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon=""></i></a>'; endif;
if ( $behance ) : $output .= '<a href="' . $behance . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon=""></i></a>'; endif;
if ( $tumblr ) : $output .= '<a href="' . $tumblr . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon=""></i></a>'; endif;
if ( $whatsapp ) : $output .= '<a href="' . $whatsapp . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon=""></i></a>'; endif;
if ( $soundcloud ) : $output .= '<a href="' . $soundcloud . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon=""></i></a>'; endif;
//
// You can insert your custom icons here
//
// medium.com
$medium = 'https://medium.com/ikigaimba/';
if ( $medium ) : $output .= '<a href="' . $medium . '" class="medium " title="Medium.com" target="_blank"><i class="x-icon-fa-medium" data-x-icon=""></i></a>'; endif;
if ( $rss ) : $output .= '<a href="' . $rss . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon=""></i></a>'; endif;
$output .= '</div>';
echo $output;
}
endif;
Then add this to Theme Options > CSS instead.
.fullscreen-section {
height: calc(100vh - 117px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Then on your section I see that you set the top and bottom padding to 18.5%; Please adjust that to padding-bottom = 0 and padding-top = 50px
Now add the CLASS fullscreen-section to your section.
And that should do the trick.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.