Header slider media queries


I am trying to make the slider on every device show the homepage first title, under the image slider so that on any device used the homepage appears with the large image slider and underneath showing

On desktop the image slider fills the screen and on mobile it is too short and showing the text underneath “EXPERTS IN GROUND INVESTIGATION” http://www.claritymove.com

I hope I have explained what it is I am trying to achieve.

Kind regards,


Try to use vh unit instead of px. The below code makes the main slider height equals to the screen height and be subtracted several pixels as height as the header bar.

#slideshow.header-slider {
  height: calc(100vh - 290px) !important;
  height: -webkit-calc(100vh - 290px) !important;
  height: -moz-calc(100vh - 290px) !important;

@media only screen and (min-width:1025px) {
  #slideshow.header-slider {
    height: calc(100vh - 110px) !important;
    height: -webkit-calc(100vh - 110px) !important;
    height: -moz-calc(100vh - 110px) !important;


Thanks for the reply, I tried the code you suggested and it works well on iphone, ipad and desktop but not samsung 6 or larger smartphones, also when you grab the edge of the screen and slowly reduce screen size to test its responsiveness it becomes quite distorted and at tablet size the slider completely disappears.