Footer formating Issues

Hey Squarespace community,

I'm trying to tighten up a few formatting issues I've been having with my footer.

1). Screenshot One: This is a desktop view, and I'm happy with how the elements appear on desktop

2). Screenshot Two: The social icons, copyright notice, and my email address drop down onto a new line when the page is viewed on a tablet. Between Desktop and tablet. How can I make it, so the text stays complete per line of copy? E.g. 

© Jody Daunton 2023

3). Screenshot Three: How can I format the footer when it goes smaller to appear as it does in screenshot Four, and not mess as it does here?

Is there anything I'm missing, or a simple fix to keep the footer looking as it does on desktop and then to become a more simple centred version once the items touch due to responsive/resizing?

There seems to be something not quite right, and I can't figure it out 🤔 

Any help would be awesome 😎 

Hi there,

Could you please share a private link to your website so we can look? Thanks!

Dan

Hey @Wolfsilon,

Thanks so much for replying.

Sorry, I thought it was included in the original post – my website can be viewed at www.jodydaunton.com.
 

🙂

@ReformDesign

Thanks for taking the time to assist me; I genuinely appreciate it!

The code block solved the issue of the text dropping down in the footer's grid. I also added a new social icon block which is now working as it should when resized.

The only issue I have now is a slightly odd black space on the right side, and the newsletter form's width is not responsive. Do you know a quick fix for this? Any help would be super appreciated.

Thanks again for taking the time to look into this for me.

You're a hero 🦸‍♂️ 💻

This is the code I'm using to style the newsletter sign-up... Once removed, the black space disappears.

//Newsletter Test//
section[data-section-id="63d7cf42680f8385f3a24eb1"] {
.newsletter-block .newsletter-form-wrapper .newsletter-form-body {
  display:flex;
    padding-right:0;
  }
  input[name="email"] {
    color: white !important;
}
  .newsletter-block .newsletter-form-field-element {
    background:none;
    border-top:2px solid white;
    border-bottom:2px solid white;
    border-left:2px solid white;
  }
  ::placeholder {
    color:#fff !important;
  }
  .newsletter-form-button-wrapper {
    margin-left:-6px;
  }
  .newsletter-form-button {
    background:#transparent !important;  
    border-top:2px solid white !important;
    border-bottom:2px solid white!important;
    border-right:2px solid white!important;
  }
}
 

@jodydd I tried to figure out the news block but I'm not sure what's going on there. 

@ReformDesign Thanks for trying. And thanks once again for your help with the code block. 

I'll look for a new news-block snippet - gonna take the path of least resistance 🙂

Have a great weekend, amigo!