Is there a way to shift the page footer and bar down to the very bottom of the screen?

Is it possible to move the footer and footer bar to the very bottom of the page instead of just under the contents?

I'm currently using the Sydney theme for WordPress and want the footer to sit across the bottom of the full-screen image.

.footer-widgets {
    padding: 5px 0;
    background-color: #252525;
}
.footer .copyr {
    color: #a8a8a8;
    margin-bottom: 0;
}
.footer-widgets .widget-title {
    text-transform: uppercase;
    color: #c5c5c5;
    line-height: normal;
    margin: 5px 0 0;
}

/* widget info */
.widget-info .logo-footer {
    margin-bottom: 5px;
}
.widget-info p {
    margin-bottom: 5px;
}
.widget-info .infomation {
    list-style: none;
    margin: 0;
}
.widget-info .infomation li {
    position: relative;
    padding: 0 0 0 30px;
    margin-bottom: 5px;
    line-height: 24px;
}
.widget-info .infomation li.address:before,
.widget-info .infomation li.phone:before,
.widget-info .infomation li.email:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "\f041";
    font-family: "FontAwesome";
    font-size: 16px;
}
.widget-info .infomation li.phone:before {
    content: "\f095";
}
.widget-info .infomation li.email:before {
    content: "\f040";
}

/* widget links */
.widget-links ul {
    list-style: none;
    margin: 0;
}
.widget-links ul li {
    padding: 10px 0 7px;
}
.widget-links ul li:first-child {
    padding-top: 0;
}
.widget-mail-subscribe p {
    padding-bottom: 10px;
}
.widget-mail-subscribe .email-sub input {
    width: 205px;
    margin-bottom: 10px;
}

/*--------------------------------------------------------------
Bottom
--------------------------------------------------------------*/
img.wp-smiley,
img.emoji {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
    border: medium none !important;
    box-shadow: none !important;
    display: inline !important;
    height: 1em !important;
    margin: 0 0.07em !important;
    padding: 0 !important;
    vertical-align: -0.1em !important;
    width: 1em !important;
    margin-bottom: 5px;
}
.site-footer {
    background-color: #1c1c1c;
    line-height: 35px;
    padding: 15px 0;
}
.site-footer,
.site-footer a {
    color: #666;
}
.site-footer .socials {
    margin: 0;
    list-style: none;
}
.bottom .socials li {
    display: inline-block;
    margin-left: 5px;
}
.site-footer .socials li a {
    display: inline-block;
    color: #666;
    font-size: 14px;
    background-color: #2e2e2e;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.site-footer .socials li:hover a {
    color: #fff;
}

Here is the relevant HTML code:

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the #content div and all content after
 *
 * @package Sydney
 */
?>
            </div>
        </div>
    </div><!-- #content -->

    <?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
        <?php get_sidebar('footer'); ?>
    <?php endif; ?>

    <a class="go-top"><i class="fa fa-angle-up"></i></a>

    <footer id="colophon" class="site-footer" role="contentinfo">
        <div class="site-info container">
        <footer>
            © Coffee Captain 2015.   This site is for educational purposes only.
        </footer>

        </div><!-- .site-info -->
    </footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
csswordpressposition

Answer №1

It would be helpful to include the following CSS in your footer:

{
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

Additionally, providing your HTML code will allow us to better assist you in solving your issue.

Answer №2

It's challenging to provide assistance without HTML.

I experimented with JSFiddle and implemented the following:

Check out the solution here

.site-footer {
        background-color: #1c1c1c;
        line-height: 35px;
        padding: 15px 0;
        position: absolute;
        bottom: 0px;
        width: 100%
    }

Based on my interpretation, this snippet of HTML may suit your needs:

<div class="site-footer">sample</div>

If you require a footer consistently positioned at the bottom of container elements, consider using this CSS:

.site-footer {
        background-color: #1c1c1c;
        line-height: 35px;
        padding: 15px 0;
        position: relative;
        bottom: 0px;
        width: 100%
    }

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

Creating a sidebar navigation in HTML and CSS to easily navigate to specific sections on a webpage

Here's a visual representation of my question I'm interested in creating a feature where scrolling will display dots indicating the current position on the page, allowing users to click on them to navigate to specific sections. How can I achieve ...

javascripthtmlcss

What is the best way to position a <div> in the center of a container?

I am currently designing a cart page for an online store, and I have decided to showcase all the items in the cart using a table format. Here is my plan: https://i.sstatic.net/PJBpo.jpg My goal is to have the name, quantity, and price of each product dis ...

htmlcss

In Angular 4 applications, all vendor CSS files are converted into style tags at the beginning of the HTML document

In my Angular 4 project, I have integrated Bootstrap, Fontawesome, and some custom CSS. However, all these styles are rendering as separate tags at the top of my index.html file. I would like them to be combined into a single bundled CSS file for better ...

htmlcssangular

What is the proper way to incorporate WordPress's user.php into a PHP script?

I need assistance with checking the availability of a username in Wordpress using AJAX and a PHP script backend. I'm facing some issues and would appreciate guidance on how to resolve them. Within the checkusername.php script, I have included WordPre ...

phpajaxwordpress

Strategies for handling `module.scss` in React and Next.js development

I feel completely lost. Just to provide some background, I am working with Next and React. // package.json "dependencies": { "@netlify/plugin-nextjs": "^3.4.2", "next": "^10.0.0", "postc ...

javascriptcssreactjssassnext.js

Is it better to use <div><a /></div> over <button />?

I've recently taken over the maintenance and upgrade of an existing website. One interesting aspect of the site is how it handles buttons. The html code for buttons looks like this: <div class="btn"> <a id="dv_remCont" runat="server" h ...

htmlcss

Menu Tabs with Rounded Edges

Seeking help to round the corners of a tabbed dynamic menu using Drupal and the dynamic-persistent-menu module. The code provided below is almost perfect, with 99% accuracy. View the current state of the menu here: . Can anyone assist in achieving the rema ...

cssimagebackground

Issues with CSS in ASP.NET MVC

Calling all CSS experts! I need some guidance on applying my custom stylesheet to a project in MVC. It seems like I'm doing everything right, but nothing is changing. Here's what I have in index.html: <link rel="stylesheet" href="~/Content/m ...

cssasp.net-mvctwitter-bootstrap

Tips for styling custom buttons within the active editor popup of tinyMCE using CSS

Looking to enhance my tinyMCE active editor popup with custom CSS. Check out the screenshot provided for reference https://i.sstatic.net/vdVDF.png. Below you can find the code snippet used as a reference: tinymce.activeEditor.windowManager.open({ tit ...

javascriptcsstinymce-4

Incorporating font options for a PDF generator package within the Symfony framework

I'm currently working on a Symfony project where I need to export PDF code that includes images and text stored in the database. Since I can't install anything on the web servers, I've opted for using the Spread PDF Generator Bundle instead ...

phpcsssymfonypdffonts

Ways to incorporate CSS design into Django input pop-up when the input is invalid

Looking to enhance the error message styling for a Django Form CharField when an incorrect length is entered, using CSS (Bootstrap classes preferred). I have successfully styled the text input itself (check the attrs section in the code), but I am unsure ...

pythoncssdjangobootstrap-4django-forms

What is the best way to position four circles within a square container using CSS?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .circles { height: 150px; width: 150px; background-color: #bbb; border-radius: 50%; displ ...

htmlcss

What is the best way to configure custom CSS styles in a React project?

I've been trying to position my Grid component from Material-UI, but so far, I haven't had any luck. What could be the issue here? class Scene extends React.Component { render() { const mystyle = { backgroundColor: "DodgerBlue", ...

cssreactjsmaterial-ui

Arrange the children dynamically

I'm struggling to position my ul menu at the top right corner of the page and adjusting the spacing between the items. Whenever I try to add padding, it disrupts the inline display. What am I missing here? #menu { top:0; width:100%; hei ...

htmlcssflexbox

The hover effect for changing the style of one element when hovering over another element is not functioning as

I've encountered an issue with styling a triangle element using the .something:hover .another{...} selector. Can anyone help me understand what might be causing this problem? .actions { display: flex; margin-top: 20px; max-width: 260px; } .a ...

css

Is there a way to change the images displayed in a JavaFXML Button?

I'm attempting to create a button that toggles between displaying an image of a red circle and an image of a blue circle when clicked. In my CSS, I've set up styles for the different states of the button: #button-debit { -fx-background-image ...

cssjavafx

What could be the reason that the accordion is failing to expand or collapse when clicked?

I am facing an issue where the div is not expanding or collapsing upon clicking the + sign. I have tried removing unnecessary scripts but it still doesn't work. Additionally, there is an error in the console: Uncaught TypeError: $(...).slideReveal is ...

htmlcsstwitter-bootstrapbootstrap-4accordion

Javascript/jQuery for enlarging and shrinking a div

Struggling with a function I'm implementing for a website. My goal is to move and expand a div upon button click, with the text on the button changing to "close". When the close button is clicked, the div should return to its original position. I&apo ...

javascriptjqueryhtmlcssanimation

What is the best way to align this content in a specific area?

How can I center the content in each section of my webpage? Here is an image for reference: https://i.stack.imgur.com/PHEXb.png I want Section 1 and Section 2 to be 100vh with the content centered on the page. .content { height: 100vh; } <!do ...

htmlcsstwitter-bootstrapbootstrap-5

Any tips for aligning the arrows correctly on Kendo menu items that have sub-items?

I am currently facing an issue with my horizontal Kendo menu, specifically with the spacing of the right-arrow icon next to menu items that have children. Despite trying various methods like adjusting padding-left, margin-left, and experimenting with pseud ...

jquerycsskendo-uikendo-asp.net-mvckendo-menu