Help! I need custom CSS for rearranging image positioning on mobile devices

Site URL: https://grouper-mandarin-2fke.squarespace.com/

Hello, Squarespacees!

I have a problem where I can't get the icons on the front page to line up beside each other on the phone. Now they all fill the screen, stocking on top of each other, and it looks really ugly.

I have tried using the design options on the images, but I cannot get it to work through that.
The only option left seems to be custom CSS.

Does anyone have an idea how to do this to the icons (starting with the house, ending on the letter) through customs CSS?

password for viewing is "kalajuttuja"

I wrote this code, and the elements are position correctly now but they are still stacking on top of each other.

@media only screen and (max-width: 1024px) {
 #block-yui_3_17_2_1_1600701221983_67563 {
    width: 25% !important;
    float: left !important;
padding: 50px;
}
}

@media only screen and (max-width: 1024px) {
 #block-yui_3_17_2_1_1600701221983_68645 {
    width: 25% !important;
    float: right !important;
padding: 50px;
 }
}

@media only screen and (max-width: 1024px) {
 #block-yui_3_17_2_1_1600701221983_73333 {
       width: 25% !important;
    float: left !important;
padding: 50px;
 }
}

@media only screen and (max-width: 1024px) {
 #block-yui_3_17_2_1_1600701221983_70958 {
    width: 25% !important;
    float: right !important;
padding: 50px;
 }
}

@media only screen and (max-width: 1024px) {
 #block-yui_3_17_2_1_1600701221983_85696 {
       width: 25% !important;
    float: left !important;
padding: 50px;
 }
}

@media only screen and (max-width: 1024px) {
 #block-yui_3_17_2_1_1600701221983_75763 {
    width: 25% !important;
    float: right !important;
padding: 50px;
 }
}

Is this the result you are looking for?

3 hours ago, rwp said:

Is this the result you are looking for?

 

Yes, this would be perfect!

First, remove these code

@media screen and (max-width: 1023px) {
    div#yui_3_17_2_1_1601229494861_280.row.sqs-row {
        width:50% !important;
        float: left !important
    }
}

@media only screen and (max-width: 1023px) {
    #block-yui_3_17_2_1_1600701221983_67563 {
    }
}

@media only screen and (max-width: 1023px) {
    #block-yui_3_17_2_1_1600701221983_68645 {
        width:25% !important;
        float: right !important;
        padding: 50px
    }
}

@media only screen and (max-width: 1023px) {
    #block-yui_3_17_2_1_1600701221983_73333 {
        width:25% !important;
        float: left !important;
        padding: 50px
    }
}

@media only screen and (max-width: 1023px) {
    #block-yui_3_17_2_1_1600701221983_70958 {
        width:25% !important;
        float: right !important;
        padding: 50px
    }
}

@media only screen and (max-width: 1023px) {
    #block-yui_3_17_2_1_1600701221983_85696 {
        width:25% !important;
        float: left !important;
        padding: 50px
    }
}

@media only screen and (max-width: 1023px) {
    #block-yui_3_17_2_1_1600701221983_75763 {
        width:25% !important;
        float: right !important;
        padding: 50px
    }
}

Next, add this to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5e6faf92d87e801b8a42fb8c .span-12 .span-6 .span-1 {
    width: 33.33% !important;
    float: left !important;
}
}

On 9/29/2020 at 11:05 AM, tuanphan said:

Next, add this to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5e6faf92d87e801b8a42fb8c .span-12 .span-6 .span-1 {
    width: 33.33% !important;
    float: left !important;
}
}

 

This works! Thank you so much!

I still have another question though. How come inserting this same code and replacing the section number with 5f62864bdb04fb55a58db069 doesn't fix the same problem @ https://grouper-mandarin-2fke.squarespace.com/paivittais? password is still "kalajuttuja"

6 hours ago, MrSub said:

This works! Thank you so much!

I still have another question though. How come inserting this same code and replacing the section number with 5f62864bdb04fb55a58db069 doesn't fix the same problem @ https://grouper-mandarin-2fke.squarespace.com/paivittais? password is still "kalajuttuja"

@media screen and (max-width:767px) {
div#page-section-5f62864bdb04fb55a58db069 .span-12 .span-1 {
    width: 50% !important;
    float: left !important;
}
}

27 minutes ago, tuanphan said:

@media screen and (max-width:767px) {
div#page-section-5f62864bdb04fb55a58db069 .span-12 .span-1 {
    width: 50% !important;
    float: left !important;
}
}

 

I appreciate this very much!

I can probably figure this out through some testing now that I have 2 samples. I got more than 20 pages left to do so if you have a quick hint you can give me easily, I would appreciate it. However, you've already helped so much. I mean I don't understand why the code needs to be different, but at least I see that I got the section correct and I can just tweak the variables to figure the rest out.

Thank you so much, and please tell me if I can do something for you, thumb up somewhere or something!

You are a legend by the way, every solution I looked up on the internet for anything it's always you helping people, thank you!

With each arrangement blocks, they create different columns, row structures, making the code different

On 10/3/2020 at 9:47 AM, tuanphan said:

With each arrangement blocks, they create different columns, row structures, making the code different

How can I find out what code I need to use?

Alternatively, if it's hard to explain can I get the last code I should need @ https://grouper-mandarin-2fke.squarespace.com/tilaus

password still: kalajuttuja

It also seems the second code you gave me with only span1 and span12 only creates 2 columns whereas the other one creates 3. Is there any way for me to make every page have 3 columns?

On 10/6/2020 at 12:31 AM, MrSub said:

How can I find out what code I need to use?

Alternatively, if it's hard to explain can I get the last code I should need @ https://grouper-mandarin-2fke.squarespace.com/tilaus

password still: kalajuttuja

It also seems the second code you gave me with only span1 and span12 only creates 2 columns whereas the other one creates 3. Is there any way for me to make every page have 3 columns?

Add to Home > Design > Custom CSS

/* tilaus 3 columns */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1600979117761_6231+.row>.span-2 {
    width: 33.33% !important;
    float: left !important;
}
}

On 10/7/2020 at 1:58 AM, tuanphan said:

Add to Home > Design > Custom CSS

/* tilaus 3 columns */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1600979117761_6231+.row>.span-2 {
    width: 33.33% !important;
    float: left !important;
}
}

 

Now I'm pretty confused, this code is so different.

Could I ask you to give me the code for each of the missing pages for this one language only?

https://grouper-mandarin-2fke.squarespace.com/kaymaan

https://grouper-mandarin-2fke.squarespace.com/paivittais

https://grouper-mandarin-2fke.squarespace.com/yhteystiedot

https://grouper-mandarin-2fke.squarespace.com/live

https://grouper-mandarin-2fke.squarespace.com/info

https://grouper-mandarin-2fke.squarespace.com/viesti

I'll try to figure out what it is I'm not understanding once the deadline is no longer a problem.
I assume that once all of these pages work, duplicating them to create two more languages should be no problem, just a simple change of the id that pertains to the specific code of a page?

I hope you can help me with this one last thing! Thank you so much!

password is: kalajuttuja

@media screen and (max-width:767px) {
/* Kaymann page */
div#page-section-5e6fb53a8f982c29ebdd528d .span-12>.row:nth-child(3)>.col {
    width: 33.33% !important;
    float: left !important;
}
/* paivittais */
div#page-section-5f62864bdb04fb55a58db069 .span-12>.row:nth-child(3)>.col {
    width: 33.33% !important;
    float: left !important;
}
}

On 10/10/2020 at 11:26 AM, tuanphan said:

@media screen and (max-width:767px) {
/* Kaymann page */
div#page-section-5e6fb53a8f982c29ebdd528d .span-12>.row:nth-child(3)>.col {
    width: 33.33% !important;
    float: left !important;
}
/* paivittais */
div#page-section-5f62864bdb04fb55a58db069 .span-12>.row:nth-child(3)>.col {
    width: 33.33% !important;
    float: left !important;
}
}

 

I cannot thank you enough, I got all the pages working now! May you be helped in your time of need!