Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: footer is not responsive for low screen sizes #352

Open
tusharpatil03 opened this issue Jan 20, 2025 · 1 comment
Open

[Bug]: footer is not responsive for low screen sizes #352

tusharpatil03 opened this issue Jan 20, 2025 · 1 comment

Comments

@tusharpatil03
Copy link

tusharpatil03 commented Jan 20, 2025

description:
footer of web page at https://nightwatchjs.org/ is not responsive for smaller screen sizes (particularly less than 768px)

step to reproduce:

  1. visit https://nightwatchjs.org/
  2. scroll down to footer of web page
  3. resize the browser window to lower than 768px or open web page on mobile or tablet

observations:

  1. nav tags list collide or get more smaller instead of forming 2x2 grid

Image

  1. social tags dive aligned horizontally

Image

Suggested fix:

  1. nav list should be aligned 2x2 by forming a grid
  2. social div should be aligned vertically
@kishorprajapati1212
Copy link

Fix: Adjusted footer layout for better responsiveness

  • Ensured .footer__wrapper-inner-menu > ul wraps properly on smaller screens.
  • Centered .footer__wrapper-inner-social elements for better alignment.
  • Updated .footer__wrapper-inner-social-logo to span full width and align content properly.
  • Improved spacing and display properties to fix unexpected gaps.

Updated file: public/css/style.css

@media (max-width: 1024px) {
  .footer__wrapper-inner-menu>ul {
    display: `flex;`
    flex-wrap: wrap;
    gap: 20px;
  }

  .footer__wrapper-inner-social {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__wrapper-inner-social-links {
    align-items: center;
  }

  .footer__wrapper-inner-social-logo {
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__wrapper-inner-social-logo svg {
    max-width: 270px;
  }
}

Image
Image
Image

this is screenshot in different size of screen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants