Re: Footer Background Image Overlap in Mobile

sarstar923 · ‎03-19-2024

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.

ThePrimeWeb · ‎03-19-2024

What changed on the mobile view? @sarstar923

Try this and see

<style>
@media only screen and (max-width: 989px) {
  .footer--blocks {
      flex-wrap: nowrap !important;
  }

  .layout--viewport {
      min-height: auto !important;
  }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-19-2024

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 "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 989px) {
  .footer--blocks {
      flex-wrap: nowrap !important;
  }

  .layout--viewport {
      min-height: auto !important;
  }
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

sarstar923 · ‎03-19-2024

I'd love for it to look like that, but unfortunately that code did not work for me!

sarstar923 · ‎03-19-2024

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.

ThePrimeWeb · ‎03-19-2024

What changed on the mobile view? @sarstar923

Try this and see

<style>
@media only screen and (max-width: 989px) {
  .footer--blocks {
      flex-wrap: nowrap !important;
  }

  .layout--viewport {
      min-height: auto !important;
  }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

sarstar923 · ‎03-19-2024

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

ThePrimeWeb · ‎03-19-2024

Oh that's great! Your site made me hungry haha 😆

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

sarstar923 · ‎03-19-2024

Oh my goodness they are seriously the best pretzels!!

Made4uo-Ribe · ‎03-19-2024

Hi @sarstar923

Would you mind to share your store URL? Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

sarstar923 · ‎03-19-2024

queencitycrunch.com

Re: Footer Background Image Overlap in Mobile

Footer Background Image Overlap in Mobile

☕Buy me a coffee☕

☕Buy me a coffee☕

☕Buy me a coffee☕

☕Buy me a coffee☕

Community Blog Articles