Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 21, 2024 at 5:23 pm #1440453
    MSM

    I have a one pager website that has a testimonial slider in the lower section of site and because the testimonial are different number of lines the site looks like it is jumping around when the slider changes to a testimonial with more or less lines/content than the previous. Is there a way to fix this?

    April 21, 2024 at 8:43 pm #1440457
    Mike

    Hey MSM,
    Thanks for the link to your site, it looks like you have two elements causing this, for the testimonials try this css:

    @media only screen and (max-width: 480px) { 
	.avia-testimonial-row {
	min-height: 688px;
}
}
@media only screen and (min-width: 481px) and (max-width: 1023px) { 
.avia-testimonial-row {
	min-height: 423px;
}
}
@media only screen and (min-width: 1024px) { 
	.avia-testimonial-row {
	min-height: 297px;
}
}

    for the “cool timeline” element try this css:

    @media only screen and (max-width: 1023px) { 
	.ctl-wrapper {
	min-height: 348px;
}
}
@media only screen and (min-width: 1024px) { 
	.ctl-wrapper {
	min-height: 366px;
}
}

    together this seems to solve the issue.

    Best regards,
    Mike

    April 21, 2024 at 9:42 pm #1440459
    MSM

    Thanks Mike,
    Am I adding this to the testimonial and cool timeline element under advanced /developer setting / custom CSS class?
    Mike

    April 21, 2024 at 9:46 pm #1440460
    Mike

    Hi,
    Try adding the CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.