Jump to content

Footer not re-sizing properly in mobile

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Please go to design>custom CSS and paste the following code
@media screen and (max-width: 764px) {
#footer {
    position: relative !important;
}
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works. Thanks!
  

Edited by TheSquareSpacer

Get Our MultiCurrency Extension for Your Site (7.0 & 7.1)

Feel free to reach out for help and projects!

The Squarespacer Limited

Link to comment

Thanks! That helped the stacking issues!

I have 2 more things, please:

  1. I still have the typography issue, where in mobile view, the text doesn't size down like it does everywhere else. 
  2. How do I make the footer container wider? If you look at the screen shot, the footer container is only 1/2 the width footer, but I'd like it to span the full width of the gray bg

Thanks!

Screen Shot 2022-05-04 at 9.10.37 PM.png

Link to comment
On 5/5/2022 at 9:13 AM, harlowbogie said:

Thanks! That helped the stacking issues!

I have 2 more things, please:

  1. I still have the typography issue, where in mobile view, the text doesn't size down like it does everywhere else. 
  2. How do I make the footer container wider? If you look at the screen shot, the footer container is only 1/2 the width footer, but I'd like it to span the full width of the gray bg

Thanks!

Screen Shot 2022-05-04 at 9.10.37 PM.png

Add to Design > Custom CSS

@media screen and (max-width:640px) {
footer#footer * {
    font-size: 14px !important;
}
div#block-yui_3_17_2_1_1606607131996_59385 p {
    white-space: nowrap !Important;
}
#footerBlock {
    width: 100% !important;
}}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 5/9/2022 at 11:17 PM, harlowbogie said:

How can I edit/remove the social icon in the footer? Please and thanks!

image.png

I don't know this. But you can add this to Design > Custom CSS to hide it

footer#footer div#socialLinks {
    display: none;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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.