Search the Community

Site URL: https://dachshund-point-4lc2.squarespace.com Hey all, I'm struggling a bit with my footer -- looks great on desktop, but once the navigation starts to break for smaller screens, it doesn't seem to center or stack in a way that makes sense. I've tried removing my custom css bit by bit to see if I can target what specifically is making this happen, but no luck.

Site URL: https://oldroadcraftspirits.com/ Hello, I am currently jumping into an existing site for a client and have run into the issue of the header and footer missing on mobile. I cannot seem to find the cause of this. Does anyone have any ideas? UPDATE: found a solution for the footer. Add the following to the custom css body #footer-sections { display: block !important; } Here is my custom css /* Header */ // TIKTOK ICON .header-actions-action--social [href*=tiktok] svg { display: none; } .header-actions-action--social [href*=tiktok]:hover { background: transparent !important;; } .header-actions-action--social [href*=tiktok]:after { content: "\e900"; display: inline-block; font-family: 'icomoon'; width: 80%; height: 80% ; top: 50%; left: 50%; transform: translate(-50%, -50%) !important; position: absolute; color: #FFFFFF; } //on About page #collection-617af5d0b1e5da2692cccdb3 .header-actions-action--social [href*=tiktok]:after { filter: invert(1); -webkit-filter: invert(1); } //on Barrel Program page #collection-61f95e4b999f590aab590174 .header-actions-action--social [href*=tiktok]:after { filter: invert(1); -webkit-filter: invert(1); } //on Shop #collection-620bccd06b51e371c543b62b .header-actions-action--social [href*=tiktok]:after { filter: invert(1); -webkit-filter: invert(1); } // LOGO -- //on About page #collection-617af5d0b1e5da2692cccdb3 .header-title-logo { filter: invert(1); -webkit-filter: invert(1); } //on Barrel Program page #collection-61f95e4b999f590aab590174 .header-title-logo { filter: invert(1); -webkit-filter: invert(1); } //on Shop #collection-620bccd06b51e371c543b62b .header-title-logo { filter: invert(1); -webkit-filter: invert(1); } /* Footer */ //TIKTOK .sqs-svg-icon--wrapper[href*=tiktok] .sqs-svg-icon--social { display: none; } .sqs-svg-icon--list:hover .sqs-svg-icon--wrapper[href*=tiktok] { background: transparent; } .sqs-svg-icon--wrapper[href*=tiktok] > div { display: none; } .sqs-svg-icon--wrapper[href*=tiktok]:after { content: "\e900"; display: inline-block; font-family: 'icomoon'; width: 100%; height: 100%; top: 60%; left: 50%; transform: translate(-50%, -50%) !important; position: absolute; color: #FFFFFF; } //footer content wrapper block #block-407672e083d341a2bb84{ display:block; } @media screen and (min-width:640px) { #footerBlocksMiddle .col.sqs-col-4.span-4 { width: 33%; } .footer { display: block; } }

Site URL: https://www.nancykononelos.com Hi, In mobile, my website footer doesn't display properly. It doesn't stack with the content above it. The typography doesn't size down Can you help me fix this, please? Thanks!

Site URL: https://www.shrgeneralcontracting.com Hello, I am attempting to reorganize the footer so that on mobile the elements are organized in an in-line format on mobile. How it is on desktop: I have the social media buttons at the bottom left, a few links <a> spaced out in the middle and the logo on the right. Underneath them all I have a copyright <p> tag. Please take a look at the attached image for reference. How I want it on mobile: I would like either the logo first, followed by the social media buttons, the three <a> links on the same line and finally the copyright beneath that. All elements should be centered. If I was simply coding this it would not be that hard but working with the square space interface has thoroughly confused me. Please help!

www.timelessweddingfilms.com Password: weddingday So I'm looking for a few things here. First and most import probably is the video on the main page. I am trying to get it to span the width of the screens for PC, Tablet, & mobile, and show the full dimensions of the video without the black bars on top and bottom that seem to be showing no matter how I resize the block. Second, I can't seem to figure out how to get the footer the way I want it. Currently it is stacked. I would like everything centered in its columns and relative to the site, but in a column layout where I have the business info stacked on the left, the navigation linked in the middle but kept it its horizontal form if possible, and then the social links on the right. When I try to even put it in the stacked form it looks weird to begin with and without any sort of way to move them at all. Third, I am trying to figure out how to extend or have a color background strip across the width of the page in a specific area. I couldn't figure out a way to create what I wanted on the site so just made an image but I want to extend the gray background. I've added some custom CSS for a few things already but I'm sure some of it needs to be fixed maybe. Also hoping there is a way to make the two gallery blocks on the home page the width of the site as well. AND when I view it in mobile mode they show up differently between the two for some reason. the first one is all together and the second one has a space between the photos. Is there a way to make it so the photos show one by one stacked in mobile view the width of the phone instead maybe? Any help for these three things would be greatly appreciated!!

Site URL: https://accordion-jaguar-tztz.squarespace.com/config/ Hi, @tuanphan kindly gave me the coding to customize the size of pictures on certain sections of my page, which worked great. This was the coding; It looks like this; I would like to do the same, but with the logo picture I have on the Footer, but again - only on the Mobile version. At the moment, the Desktop version of the Footer looks fine, like this; But the Mobile version looks like this, I'd like to make it a lot smaller; I'm guessing it's a similar coding to Tuanphan's, could someone help me write that CSS, so that it affects that picture all across the website, but on the Mobile version only? The password for my site: ost Thanks so much for your help! Tomm

Site URL: https://www.thefarmco.com/shop-the-farm-menu Something strange is happening: when I add HTML code for a Dutchie iFrame on the page referenced above, the footer disappears. When I deleted the code block the footer reappears. Another page on the site has a slightly different code block, also for a Dutchie iFrame, and the footer is visible (https://www.thefarmco.com/shop-the-farm-express-menu). Does anyone know what is happening? Is it because the content of the iFrame is too long? Any other ideas? Thansk!

Site URL: http://www.maevaberthelot.com I built my website with Squarespace 7.1 and on the mobile version the blocks in the footer seem to be automatically stacked vertically (pic 1). I am trying to get all the blocks in one horizontal line like on the laptop version (pic 2). Does anyone know how this can be changed? Thanks in advance!

Site URL: https://aqua-carillon-4dzj.squarespace.com/ Hi, my footer looks great on desktop, terrible on mobile. Can anyone help me with a code that would prevent the text and logo from stacking? I already entered a code that makes the text align to the left but now I want the logo to be next to it on the right side. Also the text should probably be smaller. I used this @media screen and (max-width:640px) { div#page-section-6282f90ff8e75966ad5d0b5f .span-12 { width: 55% !important; float: left !important; } } Site url: https://aqua-carillon-4dzj.squarespace.com/ Password: Metro123

Site URL: https://www.darkarts.co I would like the black bar to stretch across the browser width, but keep the address and social icons centred as they are.... I'm using Forster 7.1 template

Site URL: https://thebasemesh.com/ How do I reduce the padding of the images in the footer? I couldn't add my own icons into the social links so I've done it through Images with URL links instead. Only problem is now I can't find out how to reduce the padding. Any help would be greatly appreciated! Password: GreyHouse157

Site URL: http://pilgrimsoul.com Looking for code injection to hide the header, footer and banner from a single page using Squarespace 7.0. I found code that works in removing the header and footer, but the banner remains. This is what I'm currently using to remove the header and footer: <style>.Header, .Footer, .Mobile-bar{display:none !important; }</style> Anyone know how to remove the banner too from a single page? The page I'm working on isn't yet enabled, but you can see the attached screenshot and the homepage URL if that helps.

Site URL: https://grey-coyote-a7r6.squarespace.com/ Hi again, I'm writing because I'd like to move some text boxes on the footer of the mobile version. I'm using version 7.1 As shown on the picture, I'd like to place the social icons just under the horizontal menu, and the text saying "Privacy Policy" should be at the bottom-right in line with the copyright legend. Any help will be much appreciated. Thanks a lot.

Current navbar/header links have an underline while you are on that certain page, i.e. on About page, About link is underlined. How can I add this to my footer links?

Site URL: https://earthworm-bassoon-ez8p.squarespace.com/home Hi all! My footer is missing on the mobile site. I hid the menu for mobile by adding some custom CSS I found because it's a single page scroll; would that make the footer disappear too?? Site password is sophie. Thanks!!

Site URL: http://alexgale.co.uk/ Hi, I'm looking to choose a specific height to lock my footer bar just above the bottom of every size of web browser. The desired distance between my footer and the bottom of my browser is perfect when viewing on my 16" Macbook pro. But when viewing on my 24" monitor the footer jumps up as well on smaller displays disappearing entirely. See attached a screen shot for both 16" Macbook Pro footer position (Green Tick) and 25" monitor position (Red Cross). The footer is fine for the mobile version! The issue refers to the main content of my site and not the initial landing page that last for a few seconds. Thanks!

Site URL: https://raccoon-tarantula-6j7y.squarespace.com/ Hi, I'd like to remove the padding from the bottom of the footer on my site. link: https://raccoon-tarantula-6j7y.squarespace.com/ pass: giuseppe thanks

My site is using the Wells template, which I started with -- yes, I realize it's older and eventually I'll handle that. Wells does not support a footer (puzzling). There is no method to migrate Wells to an equivalent (7.1) template (more puzzling). I am using a cover page along with the rest of the template pages. I figured out how to place a (C) Copyright in the bottom of the menu, in Wells. But what I'm really trying to accomplish is placing this via CSS in the equivalent of a footer that is uniform across all pages, including the cover, in a light gray color. So basically: (C) 2021 My Name. All rights reserved. or something like that. The Cover item is different from the internal pages, so it would likely need to be referenced as such in CSS. I just can't seem to figure out how to do this. Thank you.

Site URL: http://www.kindrehab.com I am trying to incorporate a code-injection from better business bureau into the footer of my website. I placed the code from BBB into my footer, but it comes out looking very blurry (I think this is a problem with the source code), and it also is just floating there underneath the footer. I am hoping to add the logo into the footer in a more obvious and more aesthetically pleasing place. Any help is appreciated

Site URL: https://strangeways.io/ I was trying to hide the footer on a landing page I was building. I used some code from this site but missed the part where they say "put it anywhere on the page but not the footer." Spoiler alert: I put it in the footer. Now my footer is missing sitewide. Here's my site (single page scroll): https://strangeways.io/ Here's a direct link to the landing page where I put the code (in the footer): https://strangeways.io/hello-stranger This is the code I used (in the footer): <style> .header, #footer-sections{ display:none !important; } </style> HOW DO I GET MY FOOTER BACK? ANY HELP WOULD BE APPRECIATED!

Site URL: https://www.physiobysteph.com/ In mobile view how do I prevent the LOOK AROUND and SERVICES blocks from breaking and remain side-by-side.

Site URL: http://copper-bullfrog-28wb.squarespace.com Hello! How could I add two columns on the footer of the phone version so the Instagram icon appears next to the links, instead of below? Thank you so much in advance!

Site URL: https://www.southernsoulyoga.com I'm having an issue with a client site on mobile. It allows users to keep scrolling beyond the footer, revealing site padding. I've tried a variety of code to remove overflow, padding, etc with no luck. Any advice would be appreciated! URL: https://www.southernsoulyoga.com

Site URL: http://armadillo-hen-falb.squarespace.com Hello, Hope there is someone that can help. I've seen that similar questions have already been asked, but I cannot get any of the codes I found work for me. I am totally new to CSS... I've attached pictures of the footer. I would like to make these changes (marked in red on the screenshots) – on desktop I would like the 3 elements to be aligned – on mobile I would like the copyright to sit at the bottom next to the social media icons and for the padding at the bottom to be reduced site: armadillo-hen-falb.squarespace.com password: comingsoon Thank you so much in advance for your help

Site URL: https://saffron-scarlet-d6ge.squarespace.com/ I was comparing all the desktop and mobile views on a site I am just about finished designing for a client [ https://saffron-scarlet-d6ge.squarespace.com/ ] when I realized that there is a mysterious background color overlapping the top of my footer content, but JUST on the home page, and JUST in mobile view. I've tried swapping the three footer sections around to see if the issue only persists in relation to a specific section or block, but it seems to persist no matter which of the three sections appears at the top of the footer. I also tried making adjustments to the color palette styles' background colors for various image/list/text blocks, but that also did nothing to alleviate the problem. Any ideas?