GithubHelp home page GithubHelp logo

Comments (5)

veerbal1 avatar veerbal1 commented on July 28, 2024 1

Footer seems fine and have no extra vertical spacing as mentioned in screenshot, but there is other UI issue with footer especially on large screen like 32 inch display.

Dashboard and its components covering full width. It is ok, but now see footer.
Screenshot 2024-01-23 at 3 59 28 PM

Footer issue -
Footer has a large spacing on x-axis
Screenshot 2024-01-23 at 4 00 46 PM

from badget.

shaikahmadnawaz avatar shaikahmadnawaz commented on July 28, 2024

Can I work on this issue? @meglerhagen

from badget.

Codehagen avatar Codehagen commented on July 28, 2024

Yes, if not @veerbal1 would like to go into it? Ill assign you both :)

from badget.

shaikahmadnawaz avatar shaikahmadnawaz commented on July 28, 2024

Yes, if not @veerbal1 would like to go into it? Ill assign you both :)

Okay 👍

from badget.

veerbal1 avatar veerbal1 commented on July 28, 2024

It is simple to fix but I need to first discuss a little about it. I think the issue is not with our footer as it has spacing around its X-axis, but the issue is with the central content body which is spreading wide from left to right and stretching content on large screens (3840 x 2160 pixels). I suggest there should be a max-width for content under the header, so it cannot extend beyond a certain limit and have better readability. I also wanted to know how others tackle the same issue for larger screens like Vercel, ShadCN-UI, and TikTok. I found they are also using max-width in their content.

ProjectX - Content Stretching Horizontally

projectx-eight-gilt vercel app_dashboard_transactions

Vercel - Content has max-width and center-aligned
vercel com_dashboard

ShadCN UI - Content has max-width and center-aligned
ui shadcn com_examples_mail (1)

What are your thoughts on it?

from badget.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.