Jump to content

fixing the footer navigation on mobile

Recommended Posts

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;
  }
}
Edited by derricksrandomviews
Link to comment
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?

Link to comment
  • 2 months later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
  • 2 months later...
  • 7 months later...

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

Link to comment
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
    }

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.