Edit page elements for mobile only (without affecting desktop) on 7.1

Hi. I'm trying to find a way to edit some page elements for mobile only (without affecting desktop) on Squarespace 7.1. The support told me it could be done only by custom css.

What I'm trying to do is fix the alignment of a code element that looks nice on the homepage desktop but not aligned on mobile view. Also some elements on the footer. If anybody knows what code could I use that would be great.

Thank you in advance!

Hi. can you share link to homepage? We can check easier

Yes, thanks! What I'm trying to change is the "order online" part where you can see 3 food delivery icons, and they are not aligned on mobile.

https://www.tapaz.co.uk

On 5/17/2021 at 2:50 PM, Tapaz said:

Yes, thanks! What I'm trying to change is the "order online" part where you can see 3 food delivery icons, and they are not aligned on mobile.

https://www.tapaz.co.uk

Can you check icons? I see error here

Please check if you can see the images now. Thanks!

15 hours ago, Tapaz said:

Please check if you can see the images now. Thanks!

Hi. You want 3 icons on same line?

It could be one under the other... or in the same line, whichever is easier

23 hours ago, Tapaz said:

It could be one under the other... or in the same line, whichever is easier

Add to Design > Custom CSS

/* 3 icons side by side */
@media screen and (max-width:767px) {
.image123 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.image123>a {
    display: block !important;
    width: 33.333% !important;
}
.image123 img {
    margin-left: 0;
}
}