Solved

Footer Background Image Overlap in Mobile

sarstar923
Tourist
7 0 1

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. 

 

IMG_0877.jpg

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1795 508 378

This is an accepted solution.

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

View solution in original post

Replies 9 (9)

ThePrimeWeb
Shopify Partner
1795 508 378

Would this work @sarstar923?

 

ThePrimeWeb_1-1710863569130.png

 

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.

 

ThePrimeWeb_0-1710863353524.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
sarstar923
Tourist
7 0 1

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

 

sarstar923
Tourist
7 0 1

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
Shopify Partner
1795 508 378

This is an accepted solution.

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
sarstar923
Tourist
7 0 1

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
Shopify Partner
1795 508 378

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
sarstar923
Tourist
7 0 1

Oh my goodness they are seriously the best pretzels!! 

Made4uo-Ribe
Shopify Partner
5515 1327 1635

Hi @sarstar923 

Would you mind to share your store URL? Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


sarstar923
Tourist
7 0 1

queencitycrunch.com