Solved

My footer doesn't display as expected on product pages

awaisrauf
New Member
9 0 0

My footer is acting up on the pages for each product.

https://thepettedpet.com/collections/all

password: miacri

Visit each of the products and scroll to the bottom. 

I don't remember the exact time it happened but it was quite after some time of editing a code. It wasn't immediately after editing the code. Also, the second product is using the original product template. I just changed the pricing to coming soon. It was fine for a long time and now recently it's also showing a messed up footer.

Few users on Fiverr also suggested that the product pages appear fine for them. I tried chrome, Mozilla and Maxthon. For me, it's still the same on all.

On chrome mobile browser, with Desktop mode enabled, the footer is behaving as expected. So I'm not sure if the code is even causing this issue.

Note: The footer is shown as expected on all pages except the product pages.

Would be really grateful to the one who's able to help me sort this issue. I've been planning to go live for while now but it's been pending for this reason.

Regards,

Awais

footer on product pages.pngnormal footer on all pages.pngdesktop mode enabled mobile browser.jpg

Accepted Solution (1)

Digitaal
Shopify Partner
13 3 4

This is an accepted solution.

So your problem comes from the app VITALS, I think if you disable it the problem with the footer will be gone. If you like to keep it then go to the theme.scss in assets and write this code at the end of the file:

 

#shopify-section-footer .main-footer{
    width: 100%;
}

#section-guarantee .grid.grid-uniform{
    width: 100%;
}

 

Tips:

1. Before you make any changes to theme.scss file make local copy on your computer, shopify won't back up the assets files

2. After you have made the changes save the file and on the product page hit hard refresh ( ctrl / cmd + F5 ), repeat the process if no changes

Let me know if everything is in place  

View solution in original post

Replies 6 (6)

Hardik29418
Shopify Partner
2858 407 1073

PLease place this code at the end of theme.scss

.site-footer .footer-item {
    width: 25%;
}

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
awaisrauf
New Member
9 0 0

Hi Param,

Unfortunately, It's still the same for me. Does it show messed up on your PC too or is it behaving as expected?

awaisrauf_0-1607063878329.png

awaisrauf_1-1607063898168.png

 

Hardik29418
Shopify Partner
2858 407 1073

Please place this code also

 

.main-footer {
    display: block !important;
}

@media only screen and (max-width: 600px) {
  .main-footer {
    display: flex !important;
 }
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
awaisrauf
New Member
9 0 0

Thanks for the support Param. Your suggestion came close to working. It fixed the issue however it created a really large are of blue that was in the footer that I had to scroll through.

fix 1.png 

fix 2.png

Digitaal
Shopify Partner
13 3 4

This is an accepted solution.

So your problem comes from the app VITALS, I think if you disable it the problem with the footer will be gone. If you like to keep it then go to the theme.scss in assets and write this code at the end of the file:

 

#shopify-section-footer .main-footer{
    width: 100%;
}

#section-guarantee .grid.grid-uniform{
    width: 100%;
}

 

Tips:

1. Before you make any changes to theme.scss file make local copy on your computer, shopify won't back up the assets files

2. After you have made the changes save the file and on the product page hit hard refresh ( ctrl / cmd + F5 ), repeat the process if no changes

Let me know if everything is in place  

awaisrauf
New Member
9 0 0

Gracias amigo. It worked. It kind of centered the items a bit but hey at least the page is loading smoothly. Besides, mobile users won't be able to tell the difference.