Change the block order content?

seab · May 4, 2021

Site URL: https://seabltd.squarespace.com/

On desktop the block content is in a zig zag order. First section shows as below:

Second sections shows as below:

However on the mobile we want the order to show as 1. Image, 2. Heading, 3. Body text, 4. Keywords, 5. Button. It shows like this for th e section where the images are aligned left but not for the section section where the images are aligned right.

Agha_Waqas · May 4, 2021

39 minutes ago, seab said:

Site URL: https://seabltd.squarespace.com/

On desktop the block content is in a zig zag order. First section shows as below:

Second sections shows as below:

However on the mobile we want the order to show as 1. Image, 2. Heading, 3. Body text, 4. Keywords, 5. Button. It shows like this for th e section where the images are aligned left but not for the section section where the images are aligned right.

can you please share the password.

seab · May 4, 2021

Password: 123456789

Agha_Waqas · May 4, 2021

4 hours ago, seab said:

Password: 123456789

it isn't working. please double check on your side.

seab · May 4, 2021

Apologies, please see the following

https://seabltd.squarespace.com/
Password: seab12345

tuanphan · May 6, 2021

On 5/5/2021 at 12:44 AM, seab said:

Apologies, please see the following

https://seabltd.squarespace.com/
Password: seab12345

Add to Design > Custom CSS

/* text image order */
@media screen and (max-width:767px) {
div#page-section-608b9a857dadbb5e55373972>.row {
    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;
}

}

seab · May 7, 2021

Thank you so much!

seab · May 7, 2021

Could this also be done for the following pages:

I tried changing the id being used for the page section for each page, but its not showing like the homepage.

tuanphan · May 7, 2021

13 hours ago, seab said:

Could this also be done for the following pages:

https://seabltd.squarespace.com/residential-services/

https://seabltd.squarespace.com/commercial-services/

https://seabltd.squarespace.com/specialised-services/

https://seabltd.squarespace.com/about-us

I tried changing the id being used for the page section for each page, but its not showing like the homepage.

Add to Design > Custom CSS

/* residential */
@media screen and (max-width:767px) {
div#page-section-608cbc6808c90d5421418ee5>.row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-608cbd553740bc152079af4a>.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-608cbd6d4505cd3b6cd21699>.row {
    display: flex;
    flex-direction: column-reverse;
}
div#page-section-608cef9714ac6972f466c010>.row:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
}

Here how I checked the code. https://www.loom.com/share/33e896442bed49dd897c9bd2c5a61beb

seab · May 8, 2021

Thank you so much for the code and for the video

tuanphan · May 9, 2021

16 hours ago, seab said:

Thank you so much for the code and for the video

I see your site has some other problems. Do you want to fix these?

Site URL – https://seabltd.squarespace.com/

1. (Tablet-Homepage) Change to 2 columns?

2. (Tablet-Homepage) prevent text wrap?

3. (Mobile-Footer) Make logos side by side

4. (Mobile-Footer) Reduce logo size?

5. (Mobile-Homepage) Change to 2 items/row?

6. (Mobile-Header) center announcement bar text?

7. (Mobile-Contact) Center fb icon + Make images side by side?

8. (Tablet-About Us) Center text – images?

9. (Tablet-About us) Prevent icon text break + Center text/button?

10. (Mobile-About Us) Move image on top of text?

11. (Mobile-About us) Make 2 or 3 images/row?

12. (Mobile-About us) Make 2 icons/row?

seab · May 10, 2021

Yes I would be interested all 12 you have mentioned.

tuanphan · May 12, 2021

On 5/10/2021 at 7:57 PM, seab said:

Yes I would be interested all 12 you have mentioned.

Q1. Q2. Q8. Add to Design > Custom CSS. If it works, let me know. We will check other problems

/* Tablet*/
@media screen and (max-width:991px) and (min-width:768px) {
/* homepage */
/* 4 icons under banner */
div#page-section-608ba3b371b68d46e81b719e>.row>.span-1 {
    width: 20%;
}
div#page-section-608ba3b371b68d46e81b719e>.row>.span-2 {
    width: 30%;
}
div#page-section-608ba3b371b68d46e81b719e>.row>.span-6 {
    width: 98%;
    margin-left: 2%;
}
/* prevent text wrap */
div#block-yui_3_17_2_1_1619771879426_16947+.row p {
    white-space: nowrap !important;
}
/* about us */
div#page-section-608f7ec814ac6972f488fbb1 .span-12>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* about us prevent text wrap */
div#block-yui_3_17_2_1_1619990908037_5839+.row p {
    white-space: nowrap !important;
}
}

seab · May 13, 2021

On 5/12/2021 at 3:30 AM, tuanphan said:

Q1. Q2. Q8. Add to Design > Custom CSS. If it works, let me know. We will check other problems


/* Tablet*/
@media screen and (max-width:991px) and (min-width:768px) {
/* homepage */
/* 4 icons under banner */
div#page-section-608ba3b371b68d46e81b719e>.row>.span-1 {
    width: 20%;
}
div#page-section-608ba3b371b68d46e81b719e>.row>.span-2 {
    width: 30%;
}
div#page-section-608ba3b371b68d46e81b719e>.row>.span-6 {
    width: 98%;
    margin-left: 2%;
}
/* prevent text wrap */
div#block-yui_3_17_2_1_1619771879426_16947+.row p {
    white-space: nowrap !important;
}
/* about us */
div#page-section-608f7ec814ac6972f488fbb1 .span-12>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* about us prevent text wrap */
div#block-yui_3_17_2_1_1619990908037_5839+.row p {
    white-space: nowrap !important;
}
}

I applied the code to the website. I don't think #8 is working when I test it on my tablet. Let me know if this is working on your end, it could just be my tablet giving issues.

tuanphan · May 14, 2021

18 hours ago, seab said:

I applied the code to the website. I don't think #8 is working when I test it on my tablet. Let me know if this is working on your end, it could just be my tablet giving issues.

Remove above & use new code

/* Tablet*/
@media screen and (max-width:991px) and (min-width:768px) {
/* homepage */
/* 4 icons under banner */
div#page-section-608ba3b371b68d46e81b719e>.row>.span-1 {
    width: 20%;
}
div#page-section-608ba3b371b68d46e81b719e>.row>.span-2 {
    width: 30%;
}
div#page-section-608ba3b371b68d46e81b719e>.row>.span-6 {
    width: 98%;
    margin-left: 2%;
}
/* prevent text wrap */
div#block-yui_3_17_2_1_1619771879426_16947+.row p {
    white-space: nowrap !important;
}
/* about us */
div#page-section-608f7ec814ac6972f488fbb1 .span-12>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* about us prevent text wrap */
div#block-yui_3_17_2_1_1619990908037_5839+.row p {
    white-space: nowrap !important;
}
div#block-608f7ec974179552263b1887 p {
    display: none;
}
div#page-section-608f7ec814ac6972f488fbb1 .sqs-block {
    padding-top: 17px;
}
}

seab · May 16, 2021

On 5/14/2021 at 7:11 AM, tuanphan said:

Remove above & use new code


/* Tablet*/
@media screen and (max-width:991px) and (min-width:768px) {
/* homepage */
/* 4 icons under banner */
div#page-section-608ba3b371b68d46e81b719e>.row>.span-1 {
    width: 20%;
}
div#page-section-608ba3b371b68d46e81b719e>.row>.span-2 {
    width: 30%;
}
div#page-section-608ba3b371b68d46e81b719e>.row>.span-6 {
    width: 98%;
    margin-left: 2%;
}
/* prevent text wrap */
div#block-yui_3_17_2_1_1619771879426_16947+.row p {
    white-space: nowrap !important;
}
/* about us */
div#page-section-608f7ec814ac6972f488fbb1 .span-12>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* about us prevent text wrap */
div#block-yui_3_17_2_1_1619990908037_5839+.row p {
    white-space: nowrap !important;
}
div#block-608f7ec974179552263b1887 p {
    display: none;
}
div#page-section-608f7ec814ac6972f488fbb1 .sqs-block {
    padding-top: 17px;
}
}

So 1 and 2 looks great. Reviewed the tablet look for the about page and this is what i am seeing with the code applied.

tuanphan · May 18, 2021

On 5/17/2021 at 6:16 AM, seab said:

So 1 and 2 looks great. Reviewed the tablet look for the about page and this is what i am seeing with the code applied.

Can you describe the desired layout?

seab · May 18, 2021

11 hours ago, tuanphan said:

Can you describe the desired layout?

Sorry for the confusion, this layout is perfect actually for the logo area on the about page. So we can actually move on as #8 is resolved.

tuanphan · May 19, 2021

17 hours ago, seab said:

Sorry for the confusion, this layout is perfect actually for the logo area on the about page. So we can actually move on as #8 is resolved.

10, 11, 12. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* q10-about us*/
div#page-section-608de828027d0b2bc66e0b57>.row {
    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;
}
/* q11-3 icons */
div#page-section-608f7ec814ac6972f488fbb1 .span-2 {
    width: 33.333% !important;
    float: left !important;
}
div#page-section-608f7ec814ac6972f488fbb1 .span-2 .image-block {
    padding: 5px;
}
/* q12-icons */
div#block-yui_3_17_2_1_1619990908037_5839+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1619990908037_5839+.row>.span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1619990908037_23507+.row .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

seab · May 20, 2021

22 hours ago, tuanphan said:

10, 11, 12. Add to Design > Custom CSS


/* Mobile */
@media screen and (max-width:767px) {
/* q10-about us*/
div#page-section-608de828027d0b2bc66e0b57>.row {
    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;
}
/* q11-3 icons */
div#page-section-608f7ec814ac6972f488fbb1 .span-2 {
    width: 33.333% !important;
    float: left !important;
}
div#page-section-608f7ec814ac6972f488fbb1 .span-2 .image-block {
    padding: 5px;
}
/* q12-icons */
div#block-yui_3_17_2_1_1619990908037_5839+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1619990908037_5839+.row>.span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1619990908037_23507+.row .span-6 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

I was able to apply and test this on my end and the code works perfectly, thank you!

Looking forward to your rest for 3 through to 7 & 9.

tuanphan · May 21, 2021

On 5/20/2021 at 3:04 PM, seab said:

I was able to apply and test this on my end and the code works perfectly, thank you!

Looking forward to your rest for 3 through to 7 & 9.

3 to 7. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* q3-footer logos side by side */
div#page-section-608a39726930603a6dd35d57>.row .span-6>.row>.span-2:nth-child(3) .image-block {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
}
/* q4-reduce logo size */
div#block-yui_3_17_2_1_1619776051375_8698 {
    width: 50%;
    margin: 0 auto;
}
/* q5-icons side by side */
div#page-section-608b5f12aed7dd34a280a33a .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-608b5f12aed7dd34a280a33a .span-3:nth-child(2n+1) {
    clear: left !important;
}
/* q6-announcement bar */
div#announcement-bar-text-inner-id p {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.sqs-announcement-bar-text {
    padding-left: 5px;
    padding-right: 5px;
}
/* q7-contact logos side by side */
div#block-yui_3_17_2_1_1620022571087_17986+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
}

seab · May 22, 2021

14 hours ago, tuanphan said:

3 to 7. Add to Design > Custom CSS



/* Mobile */
@media screen and (max-width:767px) {
/* q3-footer logos side by side */
div#page-section-608a39726930603a6dd35d57>.row .span-6>.row>.span-2:nth-child(3) .image-block {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
}
/* q4-reduce logo size */
div#block-yui_3_17_2_1_1619776051375_8698 {
    width: 50%;
    margin: 0 auto;
}
/* q5-icons side by side */
div#page-section-608b5f12aed7dd34a280a33a .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-608b5f12aed7dd34a280a33a .span-3:nth-child(2n+1) {
    clear: left !important;
}
/* q6-announcement bar */
div#announcement-bar-text-inner-id p {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.sqs-announcement-bar-text {
    padding-left: 5px;
    padding-right: 5px;
}
/* q7-contact logos side by side */
div#block-yui_3_17_2_1_1620022571087_17986+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
}

Amazing thank you so much, we really appreciate it! Looking forward to #9

tuanphan · May 24, 2021

On 5/22/2021 at 11:25 AM, seab said:

#9. I see it looks fine here

9. (Tablet-About us) Prevent icon text break + Center text/button?

Also, do you want to remove "X" icon on Announcement bar?

seab · May 24, 2021

8 hours ago, tuanphan said:

#9. I see it looks fine here

9. (Tablet-About us) Prevent icon text break + Center text/button?

Also, do you want to remove "X" icon on Announcement bar?

Sure no problem, I would appreciate that.

Change the block order content?

Recommended Posts

seab

Agha_Waqas

seab

Agha_Waqas

seab

tuanphan

seab

seab

tuanphan

seab

tuanphan

seab

tuanphan

seab

tuanphan

seab

tuanphan

seab

tuanphan

seab

tuanphan

seab

tuanphan

seab

Archived

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources