Jump to content

Change the block order content?

Recommended Posts

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
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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.