Splitting Mobile Footer into two columns for Palo Alto theme

laurenmarketi20
New Member
6 0 0

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!! 

Screenshot 2024-05-01 101337.pngScreenshot 2024-05-01 101439.png

Replies 3 (3)

GabrielS
Shopify Partner
481 106 114

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:

GabrielS_0-1714556240095.png

 

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

 

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
laurenmarketi20
New Member
6 0 0

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!!! 

 

Screenshot 2024-05-01 104813.png

GabrielS
Shopify Partner
481 106 114

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!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.