Splitting Mobile Footer into two columns for Palo Alto theme

[laurenmarketi20]

Hello! 

I am looking to split my mobile footer into two columns. When I move to mobile it takes up a full screen size? I'm using the Palo Alto theme, is this possible at all? 

Thank you!! 

[GabrielS]

Hello,

You can achieve this by using the below CSS code, or something similar to it:

@media (max-width:768px) {
footer#SiteFooter {
  overflow: hidden;
}
.footer-content {
  width: 50%;
  float: left;
}
.footer-bottom {
  width: 50%;
  float: left;
}
}

Adding it at the end of your theme.css file would render as the following screenshot:

Further adjusting the structure is possible, but may require more than just CSS.

Cheers!

[laurenmarketi20]

Hi Gabriel, 

Thanks so much! That worked ~ this may be too difficult, but now the blocks are stacked making the left side quite long, did you know if there was a way to split the four content blocks 2 x 2 next to each other? Rather than stacked on the left side? 

Thanks so much!!! 

[GabrielS]

Glad to hear that I could be of help!

Regarding your question of adjusting this further, unfortunately, assuming the current structure, it wouldn't be possible through plain CSS -  at least not in a 'clean' way.

Cheers!