Squarespace | Tips for Completely Removing the Footer in the Pacific Template

I must say, the footer on this website is incredibly stubborn. Let's take a look at subject A:

URL:

Hello there! I'm currently working on a website and I'm facing a challenge with the background not stretching to fit the entire window when resized. I've tried various methods like:

using Code Header injection

  <style>#header {
   display: none !important;
   
   #preFooter {
   display: none !important;
   }
   #footer {
   display: none !important;
   }
   #page {
   width: 100% !important;
   min-height: 700px !important;
   padding:20px !important;
   margin: 0px !important;
   max-width: 100% !important;
   }</style>

Trying different settings in page configurations

  <style>
  #footer {
  display: none !important;
  }
  </style> 
 

Although I managed to remove the prefooter content, the main footer still persists... How can I make the background stretch to cover the whole window? I want it to resemble a cover page but with HTML features for customizations like JavaScript or jQuery. I have seen similar templates achieving this, so how do I get rid of that stubborn footer? Any help or suggestions would be greatly appreciated.

That white block at the bottom of my current page needs to go. Can you assist me in removing it? Here's a visual reference: http://prntscr.com/aaelvf

And then there's that annoying grey block at the bottom from the standard template. Help me get rid of it as well: http://prntscr.com/aaeo8m

Any guidance or assistance will be highly valued. Thank you!

Answer №1

The footer has completely disappeared from view (you've hidden it really well). All that remains is an empty HTML tag. To fix this, you'll need to add some content to extend the page or adjust the initial height to make it taller, which will give it a white background. For example:

#page {
  width: 100%;
  min-height: 1200px;
  padding: 20px !important;
  margin: 0px !important;
  max-width: 100% !important;
}

However, setting the default height of the page to 1200px may not be ideal. It's worth checking the image itself and adjusting the height being set by Squarespace (806px).

style="top: 0px; left: -135px; width: 1210px; height: 806px; position: relative;"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Production environment experiencing issues with jQuery tabs functionality

Currently, I have implemented jQuery tabs on a simple HTML page. The tabs are functioning correctly and smoothly transitioning between different content sections. However, upon integrating this setup into my actual project environment, I encountered an is ...

The issue of centering not working with a specified width under the CSS rule `margin: 0 auto

As I was creating sections for a mini "about me" page, I encountered an issue with setting margins in all divs (this one is the most important). Despite specifying widths and heights, I couldn't get margin: 0 auto; to work. body { background: #aaa; ...

Is there a way to use jQuery to animate scrolling on a mobile web browser?

I'm trying to make the page scroll to a specific position when a button is clicked. The code I currently have works fine on browsers like Chrome and IE, but doesn't seem to work on any mobile browser. Below is the code snippet I am using: $("#p ...

Get the maximum width in pixels through JavaScript when it is specified in different units within the CSS

I'm looking to retrieve the max-width value in px from CSS for use in a JavaScript code. The challenge is that this value might be specified in different units in the CSS file. Any suggestions on how to achieve this using JavaScript? const element = ...

Adjustable image scaling with dynamic maximum height

Instead of trying to explain the problem I need to solve, let me show you an example for better clarity (apologies to mobile users, this may not work...) You can observe the effect I am aiming for on VICE news () While resizing the browser, notice how th ...

The background image in the hovering textbox shifts and changes size

I've been trying to set a background image on a Kendo UI Textbox. It looks good until you hover over it. But when you do hover over it, this issue arises: How can I resolve this? The background image should remain in place even when I hover and cli ...

Tips for implementing jQuery on a CSS selector's :before pseudo-element

My dilemma involves creating a div using CSS with an added X at the top-right corner using the before pseudo-class. How can I implement a function to close this div by clicking on the X with the assistance of javascript? https://i.sstatic.net/Z5uSq.png C ...

Troubleshooting a problem with the navigation links on a single-page website with a

https://i.sstatic.net/5xcv9.png My website alampk.com features a single page layout with a fixed navbar at the top. However, when I click on links like exp, portfolio, etc., the section moves to the top but a portion of 50px gets covered by the navbar. I ...

What is the best way to display CSV file data on an HTML webpage?

I am encountering an issue with displaying the data from my CSV file in an HTML page. Here is a snippet of my CSV file: number:Int,english,french,german 1,one,un,eins 2,two,deux,zwei 3,three,trois,drei 4,four,quattre,four 5,five,cinque,fuenf 6,six,six,sec ...

Modifying .vue files within Laravel seems to unexpectedly impact unrelated CSS styles

I've been working on a Laravel project that involves building Vue components. Strangely, every time I update a .vue file and add it for a commit, modifications are also made to the app.css and app.js files. These changes seem to be undoing a particula ...

Why is it that jQuery is not working in Internet Explorer but works fine in Firefox?

Below is the code for handling file upload onchange event: <input type='file' onchange="displayFilePath(this);" id="loadfile" /> This text field will display the full path of the uploaded file. <script type="text/javascript"> fun ...

How can I transfer data from a text box to a combo box?

I am currently engaged in developing a web application that utilizes HTML, CSS, and PHP. However, I am interested in learning how to pass the value from a text box to a combo box. Below is the section of HTML code related to this query. Additionally, it ...

Preserve page configurations upon page refresh

I'm currently in the process of creating a 'user settings' form. Each list item represents a different section, such as Updating username, Updating email, and Changing password. It looks something like this: <li> <header>Ti ...

Extract specific data points from external API responses on a webpage crafted in HTML

I require assistance on how to extract individual values from an HTML page. I received a response from the PAYU payment gateway team in HTML format, but I need to retrieve specific attribute values related to the transaction details. Below is the response ...

Unable to conceal HTML5 video in mobile devices through media query

I've been struggling to find a solution for hiding a video on mobile devices. Despite going through numerous posts and attempting different methods, I haven't been successful in using @media queries to hide the video and show an image instead. He ...

fill out an HTML form and send it in

When submitting a form with two components, only the first form 'School' and the submit button itself are successfully submitted. The second form 'pool' seems to disappear somehow. <form method='get'> <select nam ...

Trying to align a telerik component in a bootstrap modal

I'm struggling to align the radmediaplayer telerik control in the center, but I can't seem to get it right. Any assistance would be greatly appreciated. Thank you. <asp:Panel ID="pnlModal3" runat="server" role="dialog" CssClass="modal fade"&g ...

Customer uploaded an image to the WordPress header but it is not aligning correctly

Trying to align an image added by my client in the WordPress header. As someone who is still learning CSS, I'm struggling to get it exactly where we want it. Visit the site here The Options House graphic currently sits on the right. My goal is to ha ...

Hiding a Blogger section when its widget is not visible

Take a look at this code: <b:section id='page-list'> <b:widget id='PageList1' locked='false' type='PageList' version='2' visible='true'> </b:widget> </b:section> I wa ...

Implementing column resizing functionality similar to Bootstrap using inline CSS for HTML email layout

Utilizing Bootstrap CSS in an HTML page creates a responsive Grid layout system, allowing columns to expand or shrink based on the screen size. By declaring grid columns using classes like col-sm-12 and col-md-6, we can control the layout effectively. I a ...