fixing the footer navigation on mobile

Site URL: https://wearepercolate.com

hello, need help on fixing the footer navigation on mobile version, it look messy. thanks!

Looks good on my laptop set to mobile view to me. I change the view to be android, or Apple, or specific phones,  looks good on all.

5 minutes ago, derricksrandomviews said:

Looks good on my laptop set to mobile view to me. 

Yeah i notice that too... if you're using desktop or mobile view from desktop it looks fine. but from actual mobile phone it looks messy

I see what you mean, the mobile view is overlapping  the menu options  on itself. 

1 minute ago, derricksrandomviews said:

I see what you mean, the mobile view is overlapping  the menu options  on itself. 

is there any solution to fix this?

Try this, you may have to adjust the width code a bit until it gets small enough to quit overlaying itself. This goes into custom css. 

/*CENTERING TEXT FOOTER IN BRINE FOR MOBILE SCREENS*/
@media screen and (max-width: 640px) {
  .Footer h3 {
    text-align: center !important;
  }
  .Footer p {
    text-align: center !important;
  }
}

8 hours ago, derricksrandomviews said:

Try this, you may have to adjust the width code a bit until it gets small enough to quit overlaying itself. This goes into custom css. 

/*CENTERING TEXT FOOTER IN BRINE FOR MOBILE SCREENS*/
@media screen and (max-width: 640px) {
  .Footer h3 {
    text-align: center !important;
  }
  .Footer p {
    text-align: center !important;
  }
}

by adjusting you mean to change the max width size?

That is correct.

43 minutes ago, derricksrandomviews said:

That is correct.

ok did not affect anything, already tried change the size number but did not do nothing

alright seems like it works on other mobile phone but on my phone (iphone 5, iOS 10) did not work, thanks so much sir!

Hi, I'm having a problem with my footer on my website for mobile version. Desktop version is fine, works perfect but as soon as you click on the products page and even on a product the following happens. Any ideas on how to fix this?

Website: www.workout-wolf.co.uk 

20 hours ago, WORKOUTWOLF said:

Hi, I'm having a problem with my footer on my website for mobile version. Desktop version is fine, works perfect but as soon as you click on the products page and even on a product the following happens. Any ideas on how to fix this?

Website: www.workout-wolf.co.uk 

 

Can you post all custom code you used? We can check easier

I am having the same problem with this and I have not been able to figure it out?

www.icegalleries.com

On 4/15/2021 at 2:33 AM, lianne0 said:

I am having the same problem with this and I have not been able to figure it out?

www.icegalleries.com

Footer looks fine here. Can you explain clearly?

Use this in CSS - you most likely adjusted the link spacing

.Footer-nav-group .Footer-nav-item {
    height: 30px;
}

Having a very similar issue where it is not formatting the foot properly, and is creating empty white space at the bottom all commerce pages. Other pages do not have that issue.

I have input both codes above, but does nothing but for reference here is the css I put in via the design section:

@media screen and (max-width: 640px) {
  .Footer h3 {
    text-align: center !important;
  }
  .Footer p {
    text-align: center !important;
  }
}

Again, the footer works across all other pages but not the commerce pages. Even if I delete the footer or have no text in it (it's current format), it does not fix it. I have even tried to create a new page and it does the same thing

Any help would be appreciated!

Website: http://www.pointeblack.co.uk/becoming

or http://www.pointeblack.co.uk/merchandise

14 hours ago, PointeBlack said:

Having a very similar issue where it is not formatting the foot properly, and is creating empty white space at the bottom all commerce pages. Other pages do not have that issue.

I have input both codes above, but does nothing but for reference here is the css I put in via the design section:

@media screen and (max-width: 640px) {
  .Footer h3 {
    text-align: center !important;
  }
  .Footer p {
    text-align: center !important;
  }
}

Again, the footer works across all other pages but not the commerce pages. Even if I delete the footer or have no text in it (it's current format), it does not fix it. I have even tried to create a new page and it does the same thing

Any help would be appreciated!

Website: http://www.pointeblack.co.uk/becoming

or http://www.pointeblack.co.uk/merchandise

Edit this code

 #page section:first-child {
        min-height: unset !important;
        height: 70vh !important
    }

to this

 #page article section:first-child {
        min-height: unset !important;
        height: 70vh !important
    }