jodydd Posted February 16, 2023 Share Posted February 16, 2023 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 😎 Link to comment
Wolfsilon Posted February 16, 2023 Share Posted February 16, 2023 Hi there, Could you please share a private link to your website so we can look? Thanks! Dan Link to comment
Solution ReformDesign Posted February 16, 2023 Solution Share Posted February 16, 2023 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
jodydd Posted February 17, 2023 Author Share Posted February 17, 2023 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. 🙂 Link to comment
jodydd Posted February 17, 2023 Author Share Posted February 17, 2023 @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 🦸♂️ 💻 Link to comment
jodydd Posted February 17, 2023 Author Share Posted February 17, 2023 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
ReformDesign Posted February 17, 2023 Share Posted February 17, 2023 @jodydd I tried to figure out the news block but I'm not sure what's going on there. Link to comment
jodydd Posted February 18, 2023 Author Share Posted February 18, 2023 @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! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment