Footer not re-sizing properly in mobile

Site URL: https://www.nancykononelos.com

Hi,

In mobile, my website footer doesn't display properly.

1. It doesn't stack with the content above it.
2. The typography doesn't size down

Can you help me fix this, please? Thanks!

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!
  

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!

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!

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;
}}

Thanks!

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

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

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

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

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

Thanks!