Search code examples
cssflexboxtailwind-css

Tailwind CSS - Overflowing footer with fixed position

I'm new to Tailwind CSS and have been trying to make a simple portfolio page with available code samples in Tailwind's documentation.

While the container class is wrapping all content on page with some margin, if I set the footer to fixed position, the footer is overflowing to the right. The issue seems to be with the fixed or absolute class as without this class, the footer takes the container's width.

What can I do to make the footer wrap within the container with the fixed class applied? A CSS approach would do but ideally I'm looking for the reason why Tailwind CSS wouldn't wrap the footer to parent's width.

Code and Demo: https://codesandbox.io/s/tailwind-portfolio-s1r1g

Trying to achieve this: Requirement

Solution

  • I have updated the HTML for your code and everything works fine. Here is the updated code : Sandbox link

    Updates made was - 1. Removed class container mx-auto from body and added as a separate container div. 2. This new div will hold your nav and other contents, except footer.

    What was happening earlier - By default footer was aligning to the left from its parent which was body and as the body was aligning to the center it was displayed as if the footer is right aligned.

    If you want to do it from your existing code, you can add one line in css - 

    footer { left: 0}