Classic Slider is cut off

Support
#1

Hello!
I have a classic slider being used, and everything works perfectly for desktop and most sizes. However when using google inspect and opening on a phone, it shows that the classic slider is cut off. Anyway to fix this?

Thanks!

#2

Hello Nate,

Classic slider is responsive by default. I would like to check that slider though the site URL attached to your account seems blank at the moment and I can’t see what you have share above on it. Would you mind sharing the URL with the issue? This way, we can diagnose it correctly and be more specific on our suggestion.

#3

http://www.glowwatertown.com/testimonials/

#4

Hello Nate,

Thanks for updating the thread. :slight_smile:

I can see slider getting cut off. Further inspecting the page I also see that you are using old version of Pro Theme 2.1.6. I suggest you to update Pro to most recent version 2.5.5 as new version comes with lot of bug fixes and new features. Here’s some resources that you can refer to update:

https://theme.co/changelog/

Thanks.

#5

Hi! Thanks for the reply,

I updated the pro theme however I am still running into the same issue.

#6

Hi Nate,

It’s due to fixed width applied to the slider. The max-width 358px is enough, you should not apply 368px width. Please change that if it’s a custom CSS. Else, please provide your admin login credentials so we could further check it.

Thanks!

#7

Hi, sorry for the delay! I can’t seem to find anywhere where we added custom CSS, so i’ll go ahead and attach my credentials in a secure note. Thanks for the help!

#8

Hello Nate,

Thanks for providing the information. I have logged in and investigated the issue. It turns out that you added a custom css that sets the width of the slider. I went ahead and updated your custom css. I ended up using this code:

$el .x-flexslider-shortcode-container {
	width: 100%!important;
	padding: 35px 0 10px 0;
}
$el .x-flexslider-shortcode-container .flex-control-nav:last-child {
	position: relative;
	right: 0;
	justify-content: center;
	align-items: center;
	border-radius: 0;
	padding-bottom: 17px;
}
$el .x-flexslider-shortcode {
	max-width: 368px;
	width: 368px;
	background: #ffffff!important;
	display: block;
	margin: 0 auto;
}

@media(max-width: 767px){
  $el .x-flexslider-shortcode {
		max-width: 90%;
		width: 90%;
	}
}
$el .x-flexslider-shortcode-container .flex-direction-nav a, .x-flexslider-shortcode-container .flex-control-nav {
	top: 0;
}
$el .flex-control-nav a {
	background: #d7dbdd;
	max-width: 8px;
	max-height: 8px;
	margin-right: 6px;
	margin-left: 6px;
}
$el .flex-direction-nav a, .flex-control-nav a:hover, .flex-control-nav a.flex-active {
	background-color: #FF6B00;
}
$el .testimonialSlider_name {
	font-size: 15px;
	color: #1A1F4A;
}
$el .testimonialSlider_content {
	font-size: 17px;
	color: #1A1F4A;
	margin-top: 20px;
	padding: 10px 30px 10px 30px;
	min-height: 100px;
}
$el .flex-viewport {
	overflow: visible !important
}
.flex-control-nav:not(.flex-control-thumbs) {
	background: none!important;
}
$el .x-slide:not(.flex-active-slide):after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0px;
	left: 0;
	pointer-events: none;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(244, 244, 244, 1) 90%);
	width: 100%;
	height: 4em;
}
$el .x-slide:not(.flex-active-slide) {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=17)";
	filter: alpha(opacity=17);
	-moz-opacity: 0.17;
	-khtml-opacity: 0.17;
	opacity: 0.17;
	bottom: 30px;
}
$el .testimonialSlider_content h3 {
	font-size: 22px;
	margin-top: 16px;
	line-height: 37px;
	font-weight: normal;
}
$el .testimonialSlider_content h3:before {
	content: '“';
}

Please check your site now.

#9

Hi!

Thank you so much for all the help! I really appreciate it! :slight_smile:

Take care!

#10

You are most welcome. :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.