Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Move title and arrows in carousel blog post used for testimonials


KickinGa

Question

Site URL: https://www.bondprosper.com

H,

I've set up a carousel and blog post to showcase some testimonials and would like to move the title and arrows as shown below.

I was also wondering if it's possible to make the posts automatically change after say 10 seconds?

image.thumb.png.461fcdf603383c87dfabd016d56a7fac.png

 

Thanks 

Jan 

Link to post
  • Answers 19
  • Created
  • Last Reply

Top Posters For This Question

19 answers to this question

Recommended Posts

  • 0
On 3/19/2021 at 11:55 AM, KickinGa said:

Update, I managed to centre the arrows but ot sure how to move them below the text as it's classed as a header?  

Hi. Do you use Business or Commerce Plan? We can use script code to move arrows position

Link to post
  • 0
On 3/22/2021 at 4:26 AM, tuanphan said:

Hi. Do you use Business or Commerce Plan? We can use script code to move arrows position

Business Plan.  Can I make this change adding in custom code?

Link to post
  • 0
On 3/24/2021 at 12:17 PM, KickinGa said:

Business Plan.  Can I make this change adding in custom code?

Add to Design > Custom CSS

/* Home testimonial */
body.homepage .summary-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}

 

Link to post
  • 0
Posted (edited)
On 3/25/2021 at 7:56 AM, tuanphan said:

Add to Design > Custom CSS



/* Home testimonial */
body.homepage .summary-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}

 

I've done that, thanks.  That moved the name below the quote! Is it possible to move the arrows below the name as well?

Edited by KickinGa
Link to post
  • 0
On 3/30/2021 at 4:51 PM, KickinGa said:

I've done that, thanks.  That moved the name below the quote! Is it possible to move the arrows below the name as well?

Add to Home Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('#block-yui_3_17_2_1_1615970763184_8436 .sqs-gallery-design-carousel .sqs-gallery-controls').insertBefore('div#block-f83c0ffcc12ee1beccd3');
	});
</script>

 

Link to post
  • 0
On 3/31/2021 at 5:01 PM, tuanphan said:

Add to Home Page Header


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('#block-yui_3_17_2_1_1615970763184_8436 .sqs-gallery-design-carousel .sqs-gallery-controls').insertBefore('div#block-f83c0ffcc12ee1beccd3');
	});
</script>

 

Thanks.  I've done that, they don't quite sit right though, they are sitting over the text.  

Link to post
  • 0
On 4/8/2021 at 4:07 PM, KickinGa said:

Thanks.  I've done that, they don't quite sit right though, they are sitting over the text.  

It looks like you changed arrow style. Do you still need help on this?

Link to post
  • 0
On 4/8/2021 at 4:07 PM, KickinGa said:

Thanks.  I've done that, they don't quite sit right though, they are sitting over the text.  

and some other problems, comment here if you need to fix any.

Site URL – https://www.bondprosper.com/

1. (Tablet-Footer) Want to increase some text width?

tablet-footer-min-3.png

2. (Tablet-Homepage-01) Increase this text width?

tablet-homepage-01-min-4.png

3. (Tablet-Homepage-02)

tablet-homepage-02-min-4.png

4. (Tablet-About-01) Increase section width?

tablet-about-01-min.png

5. (Tablet-About-02)

tablet-about-02-min.png

6. (Tablet-About-03) Want to change buttons width & make height equal?

tablet-about-03-min.png

7. (Tablet-London)

tablet-london-min.png

8. (Tablet-Manchester-01)

tablet-manchester-01-min.png

9. (Tablet-Manchester-02)

tablet-manchester-02-min.png

Link to post
  • 0
On 4/12/2021 at 3:57 PM, tuanphan said:

It looks like you changed arrow style. Do you still need help on this?

Hi, yes I still need help with this.  How did I change the arrow style?  I only entered the code you provided.  Is there a way to change this back to the smaller arrows?  I would prefer them to be the same arrows as before, however with the arrows located underneath the persons name who provided the testimonial.

Link to post
  • 0
On 4/12/2021 at 10:37 PM, tuanphan said:

and some other problems, comment here if you need to fix any.

Site URL – https://www.bondprosper.com/

1. (Tablet-Footer) Want to increase some text width?

tablet-footer-min-3.png

2. (Tablet-Homepage-01) Increase this text width?

tablet-homepage-01-min-4.png

3. (Tablet-Homepage-02)

tablet-homepage-02-min-4.png

4. (Tablet-About-01) Increase section width?

tablet-about-01-min.png

5. (Tablet-About-02)

tablet-about-02-min.png

6. (Tablet-About-03) Want to change buttons width & make height equal?

tablet-about-03-min.png

7. (Tablet-London)

tablet-london-min.png

8. (Tablet-Manchester-01)

tablet-manchester-01-min.png

9. (Tablet-Manchester-02)

tablet-manchester-02-min.png

Yes this all needs fixing right.  Is there some header code that can be entered to make this all sit better when in tablet mode?  It seems the Squarespace code doesn't work well for tablet format size.

Link to post
  • 0
On 4/15/2021 at 11:39 AM, KickinGa said:

Yes this all needs fixing right.  Is there some header code that can be entered to make this all sit better when in tablet mode?  It seems the Squarespace code doesn't work well for tablet format size.

Sorry, I don't see your notification.

Add to Design > Custom CSS

/* Tablet issues */
@media screen and (max-width:991px) and (min-width:768px) {
/* footer text */
div#block-78af0913140044f010fb {
    padding-left: 0;
    padding-right: 5px;
}
/* Homepage width */
[data-section-id="5fc488f6a97599144e89becf"] .content {
    width: 90% !important;
}
/* working with you */
div#page-section-5fc657f43f75b16643acacb8 .span-8 {
    width: 95%;
    margin: 0 auto;
}
div#page-section-5fc657f43f75b16643acacb8 .span-2 {
    display: none;
}
div#page-section-5fc657f43f75b16643acacb8 .span-10 {
    width: 100%;
}
/* About page */
[data-section-id="5fdc81bbd1d11b6b5bc0908b"] .content {
    width: 100% !Important;
}
[data-section-id="5fdc81bbd1d11b6b5bc0908d"] .content {
    width: 95% !Important;
}
/* about - your prosper */
[data-section-id="5fdc81bbd1d11b6b5bc0908f"] .content {
    width: 95% !important;
}
/* our values buttons */
[data-section-id="5fdc892a9208b55ab496c8aa"] .content {
    width: 95% !important;
}
}

 

Link to post
  • 0
On 4/24/2021 at 10:07 PM, tuanphan said:

Sorry, I don't see your notification.

Add to Design > Custom CSS


/* Tablet issues */
@media screen and (max-width:991px) and (min-width:768px) {
/* footer text */
div#block-78af0913140044f010fb {
    padding-left: 0;
    padding-right: 5px;
}
/* Homepage width */
[data-section-id="5fc488f6a97599144e89becf"] .content {
    width: 90% !important;
}
/* working with you */
div#page-section-5fc657f43f75b16643acacb8 .span-8 {
    width: 95%;
    margin: 0 auto;
}
div#page-section-5fc657f43f75b16643acacb8 .span-2 {
    display: none;
}
div#page-section-5fc657f43f75b16643acacb8 .span-10 {
    width: 100%;
}
/* About page */
[data-section-id="5fdc81bbd1d11b6b5bc0908b"] .content {
    width: 100% !Important;
}
[data-section-id="5fdc81bbd1d11b6b5bc0908d"] .content {
    width: 95% !Important;
}
/* about - your prosper */
[data-section-id="5fdc81bbd1d11b6b5bc0908f"] .content {
    width: 95% !important;
}
/* our values buttons */
[data-section-id="5fdc892a9208b55ab496c8aa"] .content {
    width: 95% !important;
}
}

 

Awesome, thanks.  It's definately looking much better.  I think the working with section still look slightly out, but I'm looking at it in ipad mode on Chrome dev tools so not sure if thats browser related.  

Looks like I may need to do some more work tweaking the other lcoation pages now as some of the layouts don't look great.  

Link to post
  • 0
22 hours ago, KickinGa said:

Awesome, thanks.  It's definately looking much better.  I think the working with section still look slightly out, but I'm looking at it in ipad mode on Chrome dev tools so not sure if thats browser related.  

Looks like I may need to do some more work tweaking the other lcoation pages now as some of the layouts don't look great.  

Which section do you have problems? Can you send, we will check again

Link to post
  • 0

Hi tuanphan

Sorry for the slow reply.  Here's what I could see using the Chrome dev tools browser for ipad settings:

This still doesn't look quite right (home page - www.bondprosper.com)

image.thumb.png.53c2f66a6677f43bf0dd4efe2cb6af9f.png

On page https://www.bondprosper.com/london-property-market sections 2, 3 and 4 need to expand to full page width:

image.thumb.png.20b6a3b856297583c27e2b2929531608.png

image.thumb.png.cbbd99bc3511b1ffb1eefb45d94b1d15.png

image.thumb.png.9778c965f47c26fc29083460f3bc6ebf.png

Same problems on Manchester page https://www.bondprosper.com/manchester-property-market and the Birmingham page https://www.bondprosper.com/birmingham-property-market, no point me sending images, just view whole page in ipad mode, lots needs changing. 

 

Link to post
  • 0
On 4/12/2021 at 8:57 AM, tuanphan said:

It looks like you changed arrow style. Do you still need help on this?

Hi tuanphan,  I also still need help on this, currently it looks like belowe, but would like the arrows as shown in red if possible please:

image.thumb.png.d6f9e32e9e929f87332fda70bbd07e53.png

 

Link to post
  • 0

Q1. 3. Seeing

Q2. Add to Design > Custom CSS

/* tablet-london property market */
@media screen and (max-width:991px) and (min-width:768px) {
[data-section-id="5f59cab57cd042259072b748"] .content, [data-section-id="5f608d962055336480ad1281"] .content, [data-section-id="5f59fc10c21f38271ec0a419"] .content {
    width: 100% !important;
}
}

Do similar with other pages. Use this tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Link to post
  • 0
On 5/28/2021 at 9:42 AM, KickinGa said:

Hi tuanphan,  I also still need help on this, currently it looks like belowe, but would like the arrows as shown in red if possible please:

image.thumb.png.d6f9e32e9e929f87332fda70bbd07e53.png

 

Any help with this?  To move arrows below name instead of at sides?  The arrows changed when I added the code you provided before tuanphan. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...