How to make mobile footer more condensed instead of vertically stacked

Site URL: https://www.onespaceatatime.ca

Hello, 

I am trying to find some css to improve the look of my footer on mobile view. Currently, there are two text blocks and two image blocks and they are all stacking vertically but I want to adjust them so that they are smaller and go across. There is probably too much to be in one row, but even condensing it to two rows would be better. Thanks for any help!

What is access password?

osaatpo2129

9 hours ago, onespaceatatime said:

osaatpo2129

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-6290ff0a2ea0e76d6e7c4dde .span-2 {
    width: 50% !important;
    float: left !important;
}
}

8 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-6290ff0a2ea0e76d6e7c4dde .span-2 {
    width: 50% !important;
    float: left !important;
}
}

 

TuanPhan, this worked great for the images as you can see in the file. Thank you.  Is there a way to bring the hours section up beside the contact info section in the footer as well?

20 minutes ago, onespaceatatime said:

TuanPhan, this worked great for the images as you can see in the file. Thank you.  Is there a way to bring the hours section up beside the contact info section in the footer as well?

Use this new code

@media screen and (max-width:767px) {
div#page-section-6290ff0a2ea0e76d6e7c4dde {
.span-2 {
    width: 50% !important;
    float: left !important;
}
.span-3 {
    width: 50% !important;
    float: left !important;
}
.span-2:nth-child(3) {
    clear: left;
}
h4 {
    white-space: nowrap !important;
}}
}

1 hour ago, tuanphan said:

Use this new code

@media screen and (max-width:767px) {
div#page-section-6290ff0a2ea0e76d6e7c4dde {
.span-2 {
    width: 50% !important;
    float: left !important;
}
.span-3 {
    width: 50% !important;
    float: left !important;
}
.span-2:nth-child(3) {
    clear: left;
}
h4 {
    white-space: nowrap !important;
}}
}

 

It is soooo close. On my phone there is a tiny gap between the end of the website and the hours section, but as you can see in the screenshot, in mobile view there is not sufficient gap between the two. I imagine that means that on some phones this is what it will look like. Is there a way to correct this?

Thanks!

11 hours ago, onespaceatatime said:

It is soooo close. On my phone there is a tiny gap between the end of the website and the hours section, but as you can see in the screenshot, in mobile view there is not sufficient gap between the two. I imagine that means that on some phones this is what it will look like. Is there a way to correct this?

Thanks!

Try this new code

@media screen and (max-width:767px) {
div#page-section-6290ff0a2ea0e76d6e7c4dde {
.span-2 {
    width: 50% !important;
    float: left !important;
}
.span-3 {
    width: 50% !important;
    float: left !important;
}
.span-2:nth-child(3) {
    clear: left;
}
h4 {
    white-space: nowrap !important;
}}
footer.sections section {
    min-height: unset !important;
}
footer.sections .content-wrapper {
    padding-bottom: 0px !important;
}
}

11 hours ago, tuanphan said:

Try this new code

@media screen and (max-width:767px) {
div#page-section-6290ff0a2ea0e76d6e7c4dde {
.span-2 {
    width: 50% !important;
    float: left !important;
}
.span-3 {
    width: 50% !important;
    float: left !important;
}
.span-2:nth-child(3) {
    clear: left;
}
h4 {
    white-space: nowrap !important;
}}
footer.sections section {
    min-height: unset !important;
}
footer.sections .content-wrapper {
    padding-bottom: 0px !important;
}
}

 

That did not change anything.