Mobile customization / optimization

Site URL: https://echidna-sheep-7ykn.squarespace.com

Website: https://echidna-sheep-7ykn.squarespace.com
Password: Spandovia

Hey everyone, 

I almost finished up my website and I think it looks great on desktop. On mobile theres still room for improvement. However, I lack the knowledge to fix these things, so Im asking for your help once again!

1.) Page: https://echidna-sheep-7ykn.squarespace.com/ueber-uns

I'm trying to move this picture: https://prnt.sc/26vvb44 
on top of that very text block: https://prnt.sc/26vvbo9

2.) Page: https://echidna-sheep-7ykn.squarespace.com/sempro
The thumbnails of the events are cut off, as can be seen here: https://prnt.sc/26vvceo

3.) Page: Click on any Event, i.e.: https://echidna-sheep-7ykn.squarespace.com/sempro/nmehv1c6wvl0y2q1cc6c6fb79yp9pw-3shee-rhza6

Theres 2 problems: https://prnt.sc/26vvdc1
1.) What is that? Looks like hieroglyphs 😄
2.) Previous event and next event are cutting over each other.

4.) Page: https://echidna-sheep-7ykn.squarespace.com/datenschutz
The title is cut off: https://prnt.sc/26vveim

Would appreciate any help for the problems above. Thank you so much!

Greetings
Lukas

help pls

It looks like you solved with?

@media only screen and (max-width: 767px) {
    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row {
        display:flex;
        flex-wrap: wrap
    }

    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row>.col {
        width: 100% !important
    }

    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row>.col:last-child {
        order: 1
    }

    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row>.col:first-child {
        order: 2
    }
}

Do you still need help with any problems?

7 hours ago, tuanphan said:

It looks like you solved with?

@media only screen and (max-width: 767px) {
    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row {
        display:flex;
        flex-wrap: wrap
    }

    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row>.col {
        width: 100% !important
    }

    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row>.col:last-child {
        order: 1
    }

    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row>.col:first-child {
        order: 2
    }
}

Do you still need help with any problems?

Yes, please! The mobile version still needs some optimization I think :c

For instance in the menu when u click on "Über uns" one of the bullet points is cut off: https://prnt.sc/DxFkbvMOwNGD

Also, when clicking on any event on the Page https://www.spandovia.de/sempro the previous and the next event cut over each other: https://prnt.sc/iLq6HfVq3b4e (Im guessing cause the font is too big. However, I dont know how to change font for  only mobile version. Everytime I change it, it also changes for the desktop version, which is unfortunate.)

And on the same page at the very bottom, you can see that the two blocks are below each other, instead of next to each other (mobile - desktop), as can be seen here:
Desktop: https://prnt.sc/mBRZhcOvaT5A
Mobile: https://prnt.sc/rYMRDVb6xyej

Would appreciate any help. Thanks tuan!

On 2/21/2022 at 9:18 AM, tuanphan said:

It looks like you solved with?

@media only screen and (max-width: 767px) {
    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row {
        display:flex;
        flex-wrap: wrap
    }

    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row>.col {
        width: 100% !important
    }

    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row>.col:last-child {
        order: 1
    }

    section[data-section-id="61e162c50352595445aa7490"] .content .sqs-layout .row>.col>.row>.col:first-child {
        order: 2
    }
}

Do you still need help with any problems?

hey tuan, have you had a chance to look at my reply?

cheers!

Not yet. Haven't been feeling well lately.

Have you solved all or still need help?