Move title and arrows in carousel blog post used for testimonials

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?

Thanks 

Jan 

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

adding padding or margin? 

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

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?

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;
}

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?

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>

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.  

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?

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?

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

3. (Tablet-Homepage-02)

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

5. (Tablet-About-02)

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

7. (Tablet-London)

8. (Tablet-Manchester-01)

9. (Tablet-Manchester-02)

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.

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?

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

3. (Tablet-Homepage-02)

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

5. (Tablet-About-02)

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

7. (Tablet-London)

8. (Tablet-Manchester-01)

9. (Tablet-Manchester-02)

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.

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;
}
}

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.  

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

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)

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

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. 

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:

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

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:

 

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.