Jump to content

Footer formating Issues

Go to solution Solved by ReformDesign,

Recommended Posts

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 😎 

 

 

Screenshot 2023-02-16 at 18.36.05.png

Screenshot 2023-02-16 at 18.36.20.png

Screenshot 2023-02-16 at 18.36.28.png

Screenshot 2023-02-16 at 18.36.41.png

Link to comment
  • Replies 7
  • Views 402
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

I might place it inside a code block so you can set the width manually. Add a new code block and replace the example code with this.

<div style="width: 190px;">
<p>© Jody Daunton 2023
<a href="mailto: hello@jodydaunton.com"><u>hello@jodydaunton.com</u></p></a>
<img src="https://images.squarespace-cdn.com/content/v1/5ee67ede594010465f46ff84/f1818960-0ca3-4af1-b076-791f016dd9a8/1ftp_Primary_Horizontal_White.png?format=500w"
  style="padding-top: 0px; width:60%;">
</div>

 

Link to comment

@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 🦸‍♂️ 💻

Screenshot 2023-02-17 at 10.57.39.png

Screenshot 2023-02-17 at 11.00.49.png

Screenshot 2023-02-17 at 11.00.43.png

Link to comment


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

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.