seab

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. 

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

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. 

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. 

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. 

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. 

Yes I would be interested all 12 you have mentioned. 

Thank you so much for the code and for the video 

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. 

Thank you so much! 

Apologies, please see the following

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

Password: 123456789

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.