Customize Footer Layout for Mobile Only - Coding Help Needed

Site URL: https://www.viewchurch.co/

Hello,

I recently built a new site for my client (viewchurch.co). On mobile, the footer is very tall and I would like to change the layout to make it shorter, by reducing the size of some images, and by utilizing columns.

To best describe what I am trying to achieve, I am including screenshot of how it currently looks and what I would like to look like in the end. 

I do not know the most efficient way to code this. The only thing I have coded so far is made the App icons smaller because they initially were full width and stacked vertically.

Any help is appreciated!

Current:

Mockup:

Try adding to Design > Custom CSS

/* Mobile Footer */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1651715354407_37932+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1651715354407_37932+.row .span-2 .image-block {
    width: 70%;
}
div#page-section-62731f8e478b0755f90f9039 .span-6 .span-2:nth-child(-n+2) {
    width: 50% !important;
    float: left !important;
}
}

11 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* Mobile Footer */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1651715354407_37932+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1651715354407_37932+.row .span-2 .image-block {
    width: 70%;
}
div#page-section-62731f8e478b0755f90f9039 .span-6 .span-2:nth-child(-n+2) {
    width: 50% !important;
    float: left !important;
}
}

 

Thank you. It is already looking better.

Can you help me with some further formatting?

**ignore the note about fixing the edges on the icons, it shows up well on my phone.**

See here: https://www.loom.com/share/cc24096d53704bbcb42963a436e0ef37

9 hours ago, beccatapert said:

Thank you. It is already looking better.

Can you help me with some further formatting?

**ignore the note about fixing the edges on the icons, it shows up well on my phone.**

See here: https://www.loom.com/share/cc24096d53704bbcb42963a436e0ef37

Add this code under

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1651715354407_37932+.row .image-block {
    padding-top: 0px !important;
}
div#page-section-62731f8e478b0755f90f9039 .span-6 .span-2:nth-child(3) {
    clear: left;
    position: relative;
    top: -50px;
    z-index: 99999;
}
}

On 7/8/2022 at 9:17 PM, tuanphan said:

Add this code under

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1651715354407_37932+.row .image-block {
    padding-top: 0px !important;
}
div#page-section-62731f8e478b0755f90f9039 .span-6 .span-2:nth-child(3) {
    clear: left;
    position: relative;
    top: -50px;
    z-index: 99999;
}
}

 

Perfect, thank you!