Header Slider Not Responsive on Mobile Screen

Hello there,

By default, the main slider background size property is set as cover. It scales the image as large as possible and maintains image aspect ratio (image doesn’t get squished). The image “covers” the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

This situation doesn’t meet your objective. So you should write a couple of extra CSS codes. Try to add the following CSS code through the Simple Custom CSS plugin.

@media only screen and (max-width: 900px){
  #slideshow{
    height: 400px !important;
  }
}

@media only screen and (max-width: 600px){
  #slideshow{
    height: 210px !important;
  }

  .text-slider-section{
    top: 40%;
  }

}

#slideshow .slides-container .slide-item{
  background-position: top center;
  background-size: 100%;
}

Probably you should need to adjust the slideshow height on a specific mobile screen size which is defined in the media query.

I hope this reply helps.

Warmest regards,
Kharis

Thank you Kharis! That fixed my situation.

Work on the slider pictures, but the txt is not adjusted correctly. How to fix that?

Hello @alexrams,

Try to adjust the top value of .text-slider-section.

.text-slider-section{
    top: 40%;
  }

Regards,
Kharis

Kharis,
I was having similar issues and have the custom css below you recommended both above and separately for another issue on the aThemes help site. Now the logo/menu section doesn’t ever change from transparent to black when the users scroll on a mobile. Any chance you can help? Thanks!
Jay
site is https://www.jayandersonphotography.com

@media only screen and (max-width: 900px) {
	#slideshow {
		height: 400px !important;
	}
}

@media only screen and (max-width: 600px) {
	#slideshow {
		height: 210px !important;
	}

	.text-slider-section {
		top: 40%;
	}
}

#slideshow .slides-container .slide-item {
	background-position: top center;
	background-size: 100%;
}

@media only screen and (max-width:1024px) {
	#masthead.site-header {
		background: transparent !important;
		position: fixed !important;
	}
}

@media only screen and (max-width: 767px) {
	.text-slider-section {
		top: 50%;
		bottom: unset;
		-webkit-transform: unset;
		-moz-transform: unset;
		-ms-transform: unset;
		-o-transform: unset;
		transform: unset;
	}

	.text-slider .maintitle,
		  .text-slider .subtitle {
		font-size: 30px;
		line-height: 36px;
	}
}

Hi all –
I have a similar query – is there any way to adjust the size of the header for mobile only? Or, better yet, change the header to a completely separate image? At the moment, the text on the header is too small to read on mobile device.

https://www.balance-golf.com