Jump to content

Testimonial slider arrows not working on desktop

Recommended Posts

Site URL: https://www.glencairnfurniture.co.uk/


My testimonial slider doesn't show arrows on desktop but does show on mobile? I have the following code under 'custom CSS'. Can you please help?

.has-site-title .Header-branding {font-family: 'GASALT THIN'; letter-spacing: 1.5px;}

blockquote {
  color: #bc9f6a; 
  font-family: futura-PT;
    letter-spacing: 0em;
  font-weight: 300;
.quote-block .source {
   color: #bc9f6a;
   padding: 16px 20px;
   font-style: italic;
  font-family: futura-PT;

.image-caption-wrapper {
 opacity: 0;
 text-align: center !important;
 top: 0 !important;
 position: relative;
 pointer-events: none !important;

&:focus {
 opacity: 1;

.image-caption {
 left: 50%;
 position: absolute;
 top: 50%;
 width: 100%;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);

.image-caption p {
 font-family: futura-pt;
 font-size: 18px !important;
 font-weight: 400 !important;
 color: #bc9f6a !important;
 line-height: 120% !important;
 letter-spacing: 1px !important;
 opacity: 1 !important;

.sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle {
 cursor: default;
 pointer-events: all !important;

.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {
 background: rgb(88,120,53) !important;
  opacity: .1 !important;

.image-caption-wrapper { max-height: 100% !important; }

 #slideshow {
 min-height: 100%;
 width: 100vw !important;
 height: auto;
 position: fixed;
 top: 0;
 left: 0;

/* Prevent Hyphenation */ 
p, h1, h2, h3 { 
-webkit-hyphens: manual !important; 
-moz-hyphens: manual !important; 
-ms-hyphens: manual !important; 
hyphens: manual !important; }

@media screen and (max-width:640px) {
body.homepage article.Index-gallery-item * {
    font-size: 12px;
section#testimonialslider {
    min-height: unset !important;
    height: 200px;

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

This code made arrows disappear

section#testimonialslider {
    min-height: unset !important;
    height: 200px;

Change it to this code

section#testimonialslider, section#testimonialslider div:not(.Index-gallery-control) {
    min-height: unset !important;
    height: 200px;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.