Hi there! Hoping someone can help me with what code I need to edit my footer in mobile only. I have a background image that is overlapping with my company information and footer menu. I’m thinking the easiest thing would be to just justify these two elements to the left or right (but totally open to other suggestions). I’ve tried various options, but either the background image sizing changes and doesn’t look right or the code just doesn’t work. Posting a picture in to show what I’m talking about with the overlap.
Topic summary
Mobile footer background image was overlapping company info and menu. The goal was to adjust mobile-only styling so the footer content didn’t sit over the background image, potentially by changing alignment.
A solution was proposed with a code snippet to be added in the theme’s Edit Code, inside theme.liquid (below the tag). A mockup screenshot showed the intended mobile footer appearance.
Initial attempt: the code did not work. After retrying, it worked but changed the entire mobile layout, and the request was to affect only the footer.
Follow-up: a revised code snippet was suggested. After reapplying, the user confirmed it no longer disrupted the overall mobile view and fixed the footer overlap.
Outcome: Resolved. The mobile footer was corrected without altering the rest of the mobile layout.
Notes:
- Screenshots were central to illustrating the overlap and desired result.
- The exact code content isn’t visible in the thread text, but the implementation involved adding mobile-specific CSS/markup in theme.liquid (the theme’s main template file) under the section.
- Store URL was shared: queencitycrunch.com.
1 Like
Would this work @sarstar923 ?
If you are ok with that then,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
Hi @sarstar923
Would you mind to share your store URL? Thanks!
I’d love for it to look like that, but unfortunately that code did not work for me!
Actually, I did get it to work I believe but it changed the entire format on mobile view. I’d love for it to look like that but only want to footer to be edited.
Just put it back in and it didn’t do the same thing as it did before with the mobile view - so that is perfect! Thank you so much!!
Oh that’s great! Your site made me hungry haha 
Oh my goodness they are seriously the best pretzels!!