V-align slider text mobile

Hi,
thanks again for the wonderful theme and the outstanding service.

I have a problem with the vertical align of the slider text an the slider height itself in the mobile view. The cta button and text area is placed on the bottom of the screen and not centered. It looks like the difference is the height of the logo.

Thanks in advance!

Hello Klaus,

I would be glad to help you, but can you please provide a link to your site?

Kind Regards, Roman.

Hi Roman,

the link is: http://innorese.echtdigital.com

It’s a development environment, so I have to lock it again after the problem ist solved.

Thanks!

Hello there,

> The cta button and text area is placed on the bottom of the screen and not centered.

Try to add the following CSS code through the Simple Custom CSS plugin.

@media only screen and (max-width: 767px){
  
  .header-slider .text-slider-section{
    position: absolute !important;
    height: 100%;
    min-height: auto !important;
    transform: none !important; 
    margin-top: 10px;
  }    
  
  .header-slider .text-slider-section .text-slider{
    height: 50%;
  }  
  
  .header-slider .text-slider-section .flex-viewport,
  .header-slider .text-slider-section .flex-viewport ul,
  .header-slider .text-slider-section .flex-viewport ul li{  
    position: relative;
    height: 100%;
  }  
  
  .header-slider .text-slider-section .flex-viewport ul li{   
    display: table;
    width: 100%;      
  }  
 
  .header-slider .text-slider-section .flex-viewport ul li .contain{   
    position: absolute;
    bottom: 0;
    width: 100%;
  } 
  
}  

Let us know how it works for you.

Regards,
Kharis

Hi Kharis,

thank you very much! It works!
But the image is still larger than the screen.

Hi @cremefresh,

Could you try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go to Settings > Header and Footer Scripts panel
  3. Paste the following code into the “Scripts in footer:”
<script>
(function($){
      
    "use strict";
  
    $(window).on('load resize', function() {

      if ( matchMedia( 'only screen and (max-width: 767px)' ).matches ) {

        var wHeight = $(window).height();
        var headHeight = $('#masthead').outerHeight();
        var newHeight = wHeight - headHeight;

        $('#slideshow').height(wHeight-headHeight);

        $('#slideshow').css({
          'max-height': newHeight + 'px'
        });

      }

    });  


})(jQuery);
</script>
  1. Save settings

You would need to clear your browser’s cache before reloading your page.

Let me know how it works for you.

Regards,
Kharis