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

Change the block order content?


seab

Question

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

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

1204273492_ScreenShot2021-05-03at10_20_56PM.thumb.png.35cb543129874d66582d5c294ba80897.png

Second sections shows as below: 

361380502_ScreenShot2021-05-03at10_21_02PM.thumb.png.881477ffbabae060ed7670be7e10f241.png

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. 

2025519031_ScreenShot2021-05-03at10_22_11PM.png.e20f49af74ab9cc3262059d1373ada3f.png

Link to comment

23 answers to this question

Recommended Posts

  • 0
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: 

1204273492_ScreenShot2021-05-03at10_20_56PM.thumb.png.35cb543129874d66582d5c294ba80897.png

Second sections shows as below: 

361380502_ScreenShot2021-05-03at10_21_02PM.thumb.png.881477ffbabae060ed7670be7e10f241.png

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. 

2025519031_ScreenShot2021-05-03at10_22_11PM.png.e20f49af74ab9cc3262059d1373ada3f.png

can you please share the password.

Link to comment
  • 0
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;
}

}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
13 hours ago, seab said:

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. 

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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?

seabltd.squarespace.com-01-min.png

2. (Tablet-Homepage) prevent text wrap?

seabltd.squarespace.com-02-min.png

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

seabltd.squarespace.com-03-min-168x300.p

4. (Mobile-Footer) Reduce logo size?

seabltd.squarespace.com-04-min.png

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

seabltd.squarespace.com-05-min.png

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

seabltd.squarespace.com-06-min.png

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

seabltd.squarespace.com-07-min.png

 

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

seabltd.squarespace.com-08-min.png

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

seabltd.squarespace.com-09-min.png

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

seabltd.squarespace.com-10-min.png

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

seabltd.squarespace.com-11-min.png

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

seabltd.squarespace.com-12-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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. 

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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. 

347422084_ScreenShot2021-05-16at6_15_11PM.thumb.png.619445c6ca4ae7572fe7920a30f8205e.png

Link to comment
  • 0
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. 

347422084_ScreenShot2021-05-16at6_15_11PM.thumb.png.619445c6ca4ae7572fe7920a30f8205e.png

Can you describe the desired layout?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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. 

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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. 

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
Posted (edited)
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

 

Edited by seab
Additional information added.
Link to comment
  • 0
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?

image.thumb.png.d53b076992e83dc13092272090c43909.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
8 hours ago, tuanphan said:

#9. I see it looks fine here

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

image.thumb.png.d53b076992e83dc13092272090c43909.png

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

Sure no problem, I would appreciate that. 

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...